<template>
  <div class="doc-assistant-page" v-loading="isPageLoading" element-loading-text="正在生成内容，请稍候..." element-loading-background="rgba(255, 255, 255, 0.9)">
    <!-- 顶部导航 -->
    <div class="top-navigation">
      <div class="back-button">
        <el-button type="primary" size="small" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
      <div class="nav-container">
        <div 
          v-for="nav in mainNavs" 
          :key="nav.value"
          class="nav-tab"
          :class="{ active: selectedMainNav === nav.value }"
          @click="selectMainNav(nav.value)"
        >
          {{ nav.label }}
        </div>
      </div>
    </div>
          
    <!-- 子导航 -->
    <div class="sub-navigation" v-if="currentSubNavs.length > 0">
      <div class="sub-nav-container">
        <div 
          v-for="subNav in currentSubNavs" 
          :key="subNav.value"
          class="sub-nav-tab"
          :class="{ active: selectedSubNav === subNav.value }"
          @click="selectSubNav(subNav.value)"
        >
          {{ subNav.label }}
            </div>
          </div>
        </div>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 左侧输入面板 -->
      <div class="input-section">
        <div class="input-content">
          <!-- 通知编写表单 -->
          <div v-if="selectedMainNav === 'office' && selectedSubNav === 'notice'" class="form-container">
          <div class="form-title">
            <h2>通知</h2>
          </div>
          
          <div class="form-body">
            <!-- 前言部分 -->
            <div class="intro-section">
              <span>根据集团公司工作安排，定于</span>
              <el-date-picker
                v-model="noticeForm.date"
                type="date"
                placeholder="选择日期"
                format="M月D日"
                value-format="M月D日"
                class="date-picker-inline"
                size="small"
              />
              <span>召开</span>
              <el-input 
                v-model="noticeForm.meetingName" 
                placeholder="主题" 
                class="inline-input auto-width-input"
                size="small"
                :title="noticeForm.meetingName"
              />
              <span>会议，现将有关事项安排如下：</span>
            </div>

            <!-- 会议安排 -->
            <div class="form-section">
              <h3>一、会议安排</h3>
              <div class="field-group">
                <label>时间：</label>
                <div class="time-range-picker">
                  <el-date-picker
                    v-model="noticeForm.startDate"
                    type="datetime"
                    placeholder="开始时间"
                    format="YYYY年M月D日 HH:mm"
                    value-format="YYYY年M月D日 HH:mm"
                    class="start-time-picker"
                    size="small"
                  />
                  <span class="time-separator">至</span>
                  <el-date-picker
                    v-model="noticeForm.endDate"
                    type="datetime"
                    placeholder="结束时间"
                    format="YYYY年M月D日 HH:mm"
                    value-format="YYYY年M月D日 HH:mm"
                    class="end-time-picker"
                    size="small"
                  />
                </div>
              </div>
              <div class="field-group">
                <label>地点：</label>
                <el-input 
                  v-model="noticeForm.location" 
                  placeholder="门牌号XX会议室"
                  class="field-input auto-width-input"
                  :title="noticeForm.location"
                />
              </div>
              <div class="field-group">
                <label>主持人：</label>
                <el-input 
                  v-model="noticeForm.host" 
                  placeholder="姓名"
                  class="field-input auto-width-input"
                  :title="noticeForm.host"
                />
              </div>
            </div>

            <!-- 参会人员 -->
            <div class="form-section">
              <h3>二、参会人员</h3>
              <el-input
                v-model="noticeForm.participants"
                type="textarea"
                :rows="4"
                placeholder="1.要分类列出参会人员，例如：集团领导序列；集团公司部门序列；集团二级单位序列；或者按照会议组织会、分控段会会区分，首在让被通知人明确知道情况2.XXX、XXX、XX"
                class="textarea-input auto-width-input readonly-textarea"
                :title="noticeForm.participants"
                @click="openModal('noticeForm', 'participants', '编辑参会人员', '1.要分类列出参会人员，例如：集团领导序列；集团公司部门序列；集团二级单位序列；或者按照会议组织会、分控段会会区分，首在让被通知人明确知道情况2.XXX、XXX、XX')"
                readonly
              />
            </div>
            
            <!-- 会议内容 -->
            <div class="form-section">
              <h3>三、会议内容 <span class="hint-text">（紫色部分为手动输入，供AI生成）</span></h3>
              
              <!-- 可填写的分类列出部分 -->
              <div class="manual-content-section">
                <el-input
                  v-model="noticeForm.manualContent"
                  type="textarea"
                  :rows="6"
                  placeholder="（分类列出，会议要讨论的内容；对于综合类会议，可依次列举出会议议程）"
                  class="manual-textarea auto-width-input"
                  :title="noticeForm.manualContent"
                  @click="openModal('noticeForm', 'manualContent', '编辑会议内容', '（分类列出，会议要讨论的内容；对于综合类会议，可依次列举出会议议程）')"
                  readonly
                />
              </div>
              
              <!-- AI生成部分 -->
              <div class="ai-content-section">
                <div class="ai-hint">（蓝色部分为AI根据整体部分成内容）</div>
                <el-input
                  v-model="noticeForm.aiContent"
                  type="textarea"
                  :rows="6"
                  placeholder="【AI生成会议内容】"
                  class="ai-textarea auto-width-input"
                  readonly
                  :title="noticeForm.aiContent"
                />
                <el-button 
                  type="primary" 
                  @click="generateNoticeContent" 
                  :loading="isGenerating"
                  class="ai-generate-btn"
                >
                  AI生成
                </el-button>
              </div>
            </div>

            <!-- 会议要求 -->
            <div class="form-section">
              <h3>四、会议要求</h3>
              <el-input
                v-model="noticeForm.requirements"
                type="textarea"
                :rows="6"
                placeholder="一（分类列出，会议要求论的内容；对于综合类会议，可依次列举出会议议程）二 XXX"
                class="textarea-input auto-width-input"
                :title="noticeForm.requirements"
                @click="openModal('noticeForm', 'requirements', '编辑会议要求', '一（分类列出，会议要求论的内容；对于综合类会议，可依次列举出会议议程）二 XXX')"
                readonly
              />
            </div>
            
                        <!-- 右下角公司信息 -->
            <div class="company-info-section">
              <div class="company-field">
                <el-input 
                  v-model="noticeForm.companyName" 
                  placeholder="请输入公司办公室名称"
                  class="company-input auto-width-input"
                  :title="noticeForm.companyName"
                />
              </div>
              </div>
              <div class="company-info-section">
              <div class="date-field">
                <el-date-picker
                  v-model="noticeForm.documentDate"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY年M月D日"
                  value-format="YYYY年M月D日"
                  class="date-picker auto-width-input"
                  :title="noticeForm.documentDate"
                />
              </div>
            </div>
            
          </div>
        </div>

        <!-- 新闻编写表单 -->
        <div v-else-if="selectedMainNav === 'office' && selectedSubNav === 'news'" class="form-container">
          <!-- <div class="form-title">
            <h2>新闻编写</h2>
          </div> -->
          
          <div class="form-body">
            <!-- 顶部指令栏 -->
            <div class="news-instruction-bar">
              <span>帮我写一篇关于</span>
              <el-input 
                v-model="newsForm.topic" 
                placeholder="主题"
                class="topic-input auto-width-input"
                size="small"
                :title="newsForm.topic"
              />
              <span>的新闻，要求包括：</span>
            </div>

            <!-- 主要输入字段 -->
            <div class="news-input-sections">
              <!-- 时间地点 -->
              <div class="news-input-section">
                <label>时间地点：</label>
                <el-input
                  v-model="newsForm.timeLocation"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入事件发生的时间和地点..."
                  class="news-textarea"
                  :title="newsForm.timeLocation"
                  @click="openModal('newsForm', 'timeLocation', '编辑时间地点', '请输入事件发生的时间和地点...')"
                  readonly
                />
              </div>

              <!-- 人物 -->
              <div class="news-input-section">
                <label>人物：</label>
                <el-input
                  v-model="newsForm.people"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入涉及的主要人物..."
                  class="news-textarea"
                  :title="newsForm.people"
                  @click="openModal('newsForm', 'people', '编辑人物', '请输入涉及的主要人物...')"
                  readonly
                />
              </div>

              <!-- 事件经过 -->
              <div class="news-input-section">
                <label>事件经过：</label>
                <el-input
                  v-model="newsForm.eventProcess"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述事件的经过和过程..."
                  class="news-textarea"
                  :title="newsForm.eventProcess"
                  @click="openModal('newsForm', 'eventProcess', '编辑事件经过', '请详细描述事件的经过和过程...')"
                  readonly
                />
              </div>

              <!-- 事件结果 -->
              <div class="news-input-section">
                <label>事件结果：</label>
                <el-input
                  v-model="newsForm.eventResult"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入事件的结果和影响..."
                  class="news-textarea"
                  :title="newsForm.eventResult"
                  @click="openModal('newsForm', 'eventResult', '编辑事件结果', '请输入事件的结果和影响...')"
                  readonly
                />
              </div>
            </div>

            <!-- 撰写风格选择 -->
            <div class="writing-style-section">
              <h3>撰写风格：</h3>
              <div class="style-options">
                <el-radio-group v-model="newsForm.writingStyle">
                  <div class="style-option">
                    <el-radio value="serious">严肃、正式</el-radio>
                  </div>
                  <div class="style-option">
                    <el-radio value="lively">活泼</el-radio>
                  </div>
                  <div class="style-option">
                    <el-radio value="literary">文艺清新</el-radio>
                  </div>
                  <div class="style-option">
                    <el-radio value="inspirational">励志正能量</el-radio>
                  </div>
                  <div class="style-option">
                    <el-radio value="other">其他</el-radio>
                    <el-input 
                      v-model="newsForm.otherStyle" 
                      placeholder="请输入"
                      class="other-style-input auto-width-input"
                      size="small"
                      :disabled="newsForm.writingStyle !== 'other'"
                      :title="newsForm.otherStyle"
                    />
                    <span class="style-hint">（勾选上可输入）</span>
                  </div>
                </el-radio-group>
              </div>
            </div>

          </div>
        </div>

        <!-- 函编写表单 -->
        <div v-else-if="selectedMainNav === 'office' && selectedSubNav === 'narrative'" class="form-container">
          <div class="form-title">
            <h2>陕西建工第十一建设集团有限公司文件</h2>
          </div>
          
          <div class="form-body">
            <div class="doc-number-section">
            <el-input 
                  v-model="letterForm.docNumber" 
                  placeholder="××××函〔202×〕 ×号"
                  class="doc-number-input auto-width-input"
                  size="small"
                  :title="letterForm.docNumber"
                />
              </div>

            <!-- 函件标题和编号 -->
            <div class="letter-title-section">
              <div class="title-row">
                <el-input 
                  v-model="letterForm.companyName" 
                  placeholder="公司名称"
                  class="company-name-input auto-width-input"
                  size="small"
                  :title="letterForm.companyName"
                />
                <span class="title-main">关于</span>
                <el-input 
                  v-model="letterForm.subject" 
                  placeholder="事由"
                  class="subject-input auto-width-input"
                  size="small"
                  :title="letterForm.subject"
                />
                <span class="title-main">的函</span>
              </div>
            </div>

            <!-- 主送单位 -->
            <div class="recipient-section">
              <div class="recipient-row">
                <el-input 
                  v-model="letterForm.recipient" 
                  placeholder="请输入主送单位"
                  class="recipient-input auto-width-input"
                  size="small"
                  :title="letterForm.recipient"
                />
              </div>
            </div>

            <!-- 函件主体内容 -->
            <div class="letter-content-section">
              <!-- 引言部分 -->
              <div class="introduction-section">
                <div class="intro-row">
                  <span>为了</span>
                  <el-input 
                    v-model="letterForm.purpose" 
                    placeholder="目的"
                    class="intro-input auto-width-input"
                    size="small"
                    :title="letterForm.purpose"
                  />
                  <span>，根据</span>
                  <el-input 
                    v-model="letterForm.basis" 
                    placeholder="依据"
                    class="intro-input auto-width-input"
                    size="small"
                    :title="letterForm.basis"
                  />
                  <span>，我们拟</span>
                  <el-input 
                    v-model="letterForm.action" 
                    placeholder="拟采取的行动"
                    class="intro-input auto-width-input"
                    size="small"
                    :title="letterForm.action"
                  />
                </div>
                <span>现将有关情况和我们的意见函告如下：<span style="color: #409EFF;">（紫色部分为手动输入，供AI生成）</span></span>
              </div>

              <!-- 主要章节输入区 -->
              <div class="letter-sections">
                <!-- 第一章：基本情况 -->
                <div class="letter-section">
                  <h3>一、基本情况</h3>
                  <el-input
                    v-model="letterForm.basicInfo"
                    type="textarea"
                    :rows="6"
                    placeholder="请详细描述基本情况..."
                    class="letter-textarea auto-width-input readonly-textarea"
                    :title="letterForm.basicInfo"
                    @click="openModal('letterForm', 'basicInfo', '编辑基本情况', '请详细描述基本情况...')"
                    readonly
                  />
                </div>

                <!-- 第二章：必要性和可行性及其意义 -->
                <div class="letter-section">
                  <h3>二、必要性和可行性及其意义</h3>
                  <el-input
                    v-model="letterForm.necessity"
                    type="textarea"
                    :rows="6"
                    placeholder="请详细描述必要性和可行性及其意义..."
                    class="letter-textarea auto-width-input readonly-textarea"
                    :title="letterForm.necessity"
                    @click="openModal('letterForm', 'necessity', '编辑必要性和可行性及其意义', '请详细描述必要性和可行性及其意义...')"
                    readonly
                  />
                </div>

                <!-- 第三章：意见 -->
                <div class="letter-section">
                  <h3>三、意见</h3>
                  <el-input
                    v-model="letterForm.opinion"
                    type="textarea"
                    :rows="6"
                    placeholder="请详细描述您的意见..."
                    class="letter-textarea auto-width-input readonly-textarea"
                    :title="letterForm.opinion"
                    @click="openModal('letterForm', 'opinion', '编辑意见', '请详细描述您的意见...')"
                    readonly
                  />
                </div>
              </div>
            </div>

            <!-- AI生成区域 -->
            <div class="letter-ai-section">
              <div class="ai-section-header">
                <span class="ai-hint">（蓝色部分为AI根据紫色部分生成内容）</span>
                <el-button 
                  type="primary" 
                  @click="generateLetterContent" 
                  :loading="isGenerating"
                  class="ai-generate-btn"
                >
                  AI生成
                </el-button>
              </div>
                <el-input
                  v-model="letterForm.aiGeneratedContent"
                  type="textarea"
                  :rows="12"
                  placeholder="一、××××（基本情况）
二、××××（必要性和可行性及其意义）
三、××××（我们的意见）"
                  class="ai-textarea auto-width-input"
                  readonly
                  :title="letterForm.aiGeneratedContent"
                />
            </div>

            <!-- 函件落款和联系信息 -->
            <div class="letter-footer">
              <div class="closing-section">
                <span>此函/特此函询(商)/特此函告/请即复函!</span>
              </div>
              <div class="date-section">
                <el-date-picker
                  v-model="letterForm.letterDate"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY年M月D日"
                  value-format="YYYY年M月D日"
                  class="letter-date-picker auto-width-input"
                  :title="letterForm.letterDate"
                />
              </div>
              
              <div class="contact-section">
                <div class="contact-row">
              
                  <el-input 
                    v-model="letterForm.contactName" 
                    placeholder="请输入联系人姓名"
                    class="contact-input auto-width-input"
                    size="small"
                    :title="letterForm.contactName"
                  />
                  
                  <el-input 
                    v-model="letterForm.contactPhone" 
                    placeholder="请输入联系电话"
                    class="contact-input auto-width-input"
                    size="small"
                    :title="letterForm.contactPhone"
                  />
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- 复函编写表单 -->
        <div v-else-if="selectedMainNav === 'office' && selectedSubNav === 'retelling'" class="form-container">
          <div class="form-title">
            <h2>陕西建工第十一建设集团有限公司文件</h2>
          </div>
          
          <div class="form-body">
            <!-- 公司抬头 -->

            <!-- 文档编号 -->
            <div class="doc-number-section">
              <el-input 
                v-model="replyLetterForm.docNumber" 
                placeholder="××××函〔202×〕 ×号"
                class="doc-number-input auto-width-input"
                size="small"
                :title="replyLetterForm.docNumber"
              />
            </div>

            <!-- 复函标题 -->
            <div class="reply-title-section">
              <div class="title-row">
                <el-input 
                  v-model="replyLetterForm.originalCompany" 
                  placeholder="公司名称"
                  class="company-name-input auto-width-input"
                  size="small"
                  :title="replyLetterForm.originalCompany"
                />
                <span>关于对</span>
                <el-input 
                  v-model="replyLetterForm.originalLetter" 
                  placeholder="《xx函》"
                  class="info-input auto-width-input"
                  size="small"
                  :title="replyLetterForm.originalLetter"
                />
                <span>的复函</span>
              </div>
            </div>

            <!-- 主送单位 -->
            <div class="recipient-section">
              <div class="recipient-row">
                <el-input 
                  v-model="replyLetterForm.recipient" 
                  placeholder="请输入主送单位"
                  class="recipient-input auto-width-input"
                  size="small"
                  :title="replyLetterForm.recipient"
                />
              </div>
            </div>

            <!-- 引言部分 -->
            <div class="introduction-section">
              <div class="intro-row">
                <el-input 
                  v-model="replyLetterForm.originalDocNumber" 
                  placeholder="《xxxx》（发文字号）"
                  class="doc-ref-input auto-width-input"
                  size="small"
                  :title="replyLetterForm.originalDocNumber"
                />
                <span>已收悉。经我公司研究讨论，现函复如下：<span style="color: #409EFF;">（紫色部分为手动输入，供AI生成）</span></span>
              </div>
            </div>

            <!-- 手动输入内容区域 -->
            <div class="manual-content-section">
              <el-input
                v-model="replyLetterForm.replyContent"
                type="textarea"
                :rows="8"
                placeholder="一、答复内容XXXX"
                class="reply-textarea auto-width-input readonly-textarea"
                :title="replyLetterForm.replyContent"
                @click="openModal('replyLetterForm', 'replyContent', '编辑答复内容', '一、答复内容XXXX')"
                readonly
              />
            </div>

            <!-- AI生成区域 -->
            <div class="reply-ai-section">
              <div class="ai-section-header">
                <span class="ai-hint">（蓝色部分为AI根据紫色部分生成内容）</span>
                <el-button 
                  type="primary" 
                  @click="generateReplyContent" 
                  :loading="isGenerating"
                  class="ai-generate-btn"
                >
                  AI生成
                </el-button>
              </div>
                <el-input
                  v-model="replyLetterForm.aiGeneratedContent"
                  type="textarea"
                  :rows="10"
                  placeholder="【AI生成】答复内容"
                  class="ai-textarea auto-width-input"
                  :readonly="true"
                  :title="replyLetterForm.aiGeneratedContent"
                />
            </div>

            <!-- 结束语和日期 -->
            <div class="reply-footer">
              <div class="closing-section">
                <span>特此函复！</span>
              </div>
              
              <div class="date-section">
                <el-date-picker
                  v-model="replyLetterForm.replyDate"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY年M月D日"
                  value-format="YYYY年M月D日"
                  class="reply-date-picker auto-width-input"
                  :title="replyLetterForm.replyDate"
                />
              </div>
            </div>

          </div>
        </div>

        <!-- 请示文件表单 -->
        <div v-else-if="selectedMainNav === 'office' && selectedSubNav === 'directive'" class="form-container">
          <div class="form-title">
            <h2>陕西建工第十一建设集团有限公司文件</h2>
          </div>
          
          <div class="form-body">
            <!-- 公司抬头 -->

            <!-- 文档编号和签发人 -->
            <div class="request-info-section">
              <div class="doc-info-row">
                <div class="doc-number-field">

                  <el-input 
                    v-model="requestForm.docNumber" 
                    placeholder="xxxx (202x) ×号"
                    class="doc-number-input"
                    size="small"
                  />
                </div>
                <div class="signatory-field">
                  <span>签发人：</span>
                  <el-input 
                    v-model="requestForm.signatory" 
                    placeholder="请输入签发人姓名"
                    class="signatory-input"
                    size="small"
                  />
                </div>
              </div>
            </div>

            <!-- 红色分隔线 -->
            <!-- <div class="red-divider"></div> -->

            <!-- 主标题 -->
            <div class="main-title-section">
              <div class="title-row">
                <el-input 
                  v-model="requestForm.companyName" 
                  placeholder="公司名称"
                  class="company-name-input auto-width-input"
                  size="small"
                />
                <span class="title-text">关于</span>
                <el-input 
                  v-model="requestForm.subject" 
                  placeholder="事由"
                  class="subject-input auto-width-input"
                  size="small"
                />
                <span class="title-text">的请示</span>
              </div>
            </div>

            <!-- 基本信息输入区域（浅橙色背景） -->
            <div class="basic-info-section">
              <div class="info-row">
                <el-input 
                  v-model="requestForm.recipient" 
                  placeholder="请输入主送单位"
                  class="info-input auto-width-input"
                  size="small"
                />
              </div>
              <div class="info-row">
                <span>为了</span>
                <el-input 
                  v-model="requestForm.purpose" 
                  placeholder="目的"
                  class="info-input auto-width-input"
                  size="small"
                  :title="requestForm.purpose"
                />
                <span>，根据</span>
                <el-input 
                  v-model="requestForm.basis" 
                  placeholder="依据"
                  class="info-input auto-width-input"
                  size="small"
                  :title="requestForm.basis"
                />
                <span>，我单位拟</span>
                <el-input 
                  v-model="requestForm.intent" 
                  placeholder="意图主旨"
                  class="info-input auto-width-input"
                  size="small"
                  :title="requestForm.intent"
                />
              </div>
              <span>现将有关情况和我们的意见报告如下：</span>
            </div>
            <!-- 报告引言 -->

            <!-- 详细内容输入区域（浅紫色背景） -->
            <div class="detailed-content-section">
              <!-- 基本情况 -->
              <div class="content-section">
                <h3>基本情况：<span class="manual-hint">（紫色部分为手动输入，供AI生成）</span></h3>
                <el-input
                  v-model="requestForm.basicSituation"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述基本情况..."
                  class="manual-textarea auto-width-input readonly-textarea"
                  :title="requestForm.basicSituation"
                  @click="openModal('requestForm', 'basicSituation', '编辑基本情况', '请详细描述基本情况...')"
                  readonly
                />
              </div>

              <!-- 必要性和可行性及其意义 -->
              <div class="content-section">
                <h3>必要性和可行性及其意义：<span class="manual-hint">（紫色部分为手动输入，供AI生成）</span></h3>
                <el-input
                  v-model="requestForm.necessity"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述必要性和可行性及其意义..."
                  class="manual-textarea auto-width-input readonly-textarea"
                  :title="requestForm.necessity"
                  @click="openModal('requestForm', 'necessity', '编辑必要性和可行性及其意义', '请详细描述必要性和可行性及其意义...')"
                  readonly
                />
              </div>

              <!-- 具体方案和请示事项 -->
              <div class="content-section">
                <h3>具体方案和请示事项：<span class="manual-hint">（紫色部分为手动输入，供AI生成）</span></h3>
                <el-input
                  v-model="requestForm.specificPlan"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述具体方案和请示事项..."
                  class="manual-textarea readonly-textarea"
                  @click="openModal('requestForm', 'specificPlan', '编辑具体方案和请示事项', '请详细描述具体方案和请示事项...')"
                  readonly
                />
              </div>
            </div>

            <!-- AI生成区域（浅蓝色背景） -->
            <div class="request-ai-section">
              <div class="ai-section-header">
                <span class="ai-hint">（蓝色部分为AI根据紫色部分生成内容）</span>
                <el-button 
                  type="primary" 
                  @click="generateRequestContent" 
                  :loading="isGenerating"
                  class="ai-generate-btn"
                >
                  AI生成
                </el-button>
              </div>
                <el-input
                  v-model="requestForm.aiGeneratedContent"
                  type="textarea"
                  :rows="12"
                  placeholder="一、××××××（基本情况及面临的问题）
二、××××××（请示事项的必要性和可行性及其意义）
三、××××××（具体方案和请示事项，包括明确地提出需要上级提供的支持是什么及这些支持匹配到位时间）  
                  "
                  class="ai-textarea auto-width-input"
                  readonly
                  :title="requestForm.aiGeneratedContent"
                />
              </div>

            <!-- 审批和附件 -->
            <div class="approval-section">
              <div class="approval-text">
                <span>妥否，请批示。</span>
              </div>
              <div class="attachment-section">
                <span>附件：</span>
                <el-button type="primary" size="small" class="upload-btn">+上传</el-button>
              </div>
            </div>

            <!-- 底部信息 -->
            <div class="request-footer">
                
                <div class="date-section">
                  <el-date-picker
                    v-model="requestForm.requestDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY年M月D日"
                    value-format="YYYY年M月D日"
                    class="request-date-picker auto-width-input"
                    :title="requestForm.requestDate"
                  />
                </div>
                <div class="contact-info">
                  <el-input 
                    v-model="requestForm.contactName" 
                    placeholder="请输入联系人姓名"
                    class="contact-input auto-width-input"
                    size="small"
                    :title="requestForm.contactName"
                  />
                  <el-input 
                    v-model="requestForm.contactPhone" 
                    placeholder="请输入联系电话"
                    class="contact-input auto-width-input"
                    size="small"
                    :title="requestForm.contactPhone"
                  />
                </div>
                <div class="cc-section">
                  <span>抄送：</span>
                  <el-input 
                    v-model="requestForm.ccRecipients" 
                    placeholder="姓名、姓名"
                    class="cc-input auto-width-input"
                    size="small"
                    :title="requestForm.ccRecipients"
                  />
                </div>
                
      
                
                <div class="unit-info">
                  <span>单位规范简称</span>
                  <el-input 
                    v-model="requestForm.unitAbbreviation" 
                    placeholder="办公室"
                    class="unit-input auto-width-input"
                    size="small"
                    :title="requestForm.unitAbbreviation"
                  />
                </div>
                
                <div class="print-date">
                  <el-date-picker
                    v-model="requestForm.printDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY年M月D日"
                    value-format="YYYY年M月D日"
                    class="print-date-picker auto-width-input"
                    :title="requestForm.printDate"
                  />
              
                </div>
              </div>
            </div>

          </div>

        <!-- 会议纪要表单 -->
        <div v-else-if="selectedMainNav === 'meeting'" class="form-container">
          <div class="form-title">
            <h2>会议纪要</h2>
          </div>
          
          <div class="form-body">
            <!-- 顶部信息 -->
            <div class="meeting-header">
              <div style="display: flex; align-items: center;justify-content: center;margin-bottom: 10px;">
                  <el-input 
                    v-model="meetingMinutesForm.docNumber" 
                    placeholder="xxxx (202x) ×号"
                    class="doc-number-input auto-width-input"
                    size="small"
                    :title="workReportForm.docNumber"
                  />
                </div>
              <div class="header-row">
                <div class="office-field">
                  <span class="required-field">*</span>
                  <el-input 
                    v-model="meetingMinutesForm.office" 
                    placeholder="××××办公室"
                    class="office-input auto-width-input"
                    size="small"
                    :title="meetingMinutesForm.office"
                  />
                </div>
                <div class="date-field">
                  <span class="required-field">*</span>
                  <el-date-picker
                    v-model="meetingMinutesForm.date"
                    type="date"
                    placeholder="xx年xx月xx日"
                    format="YYYY年MM月DD日"
                    value-format="YYYY年MM月DD日"
                    class="date-picker auto-width-input"
                    :title="meetingMinutesForm.date"
                  />
                </div>
              </div>
              <div class="title-field">
                <span class="required-field">*</span>
                <el-input 
                  v-model="meetingMinutesForm.meetingTitle" 
                  placeholder="××××会议纪要"
                  class="meeting-title-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.meetingTitle"
                />
              </div>
            </div>

            <!-- 会议基本信息 -->
            <div class="meeting-info-section">
              <div class="info-row">
                <span>时 间：<span class="required-field">*</span></span>
                <el-date-picker
                v-model="meetingMinutesForm.time" 
                    type="datetime"
                     placeholder="xx年xx月xx日时:分:秒"
                    format="YYYY年M月D日 HH:mm"
                    value-format="YYYY年M月D日 HH:mm"
                    class="start-time-picker"
                    size="small"
                    :title="meetingMinutesForm.time"
                  />
              </div>
              <div class="info-row">
                <span>地 点：<span class="required-field">*</span></span>
                <el-input 
                  v-model="meetingMinutesForm.location" 
                  placeholder="请输入会议地点"
                  class="location-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.location"
                />
              </div>
              <div class="info-row">
                <span>主持人：<span class="required-field">*</span></span>
                <el-input 
                  v-model="meetingMinutesForm.host" 
                  placeholder="请输入主持人姓名"
                  class="host-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.host"
                />
              </div>
            </div>

            <!-- 会议内容输入 -->
            <div class="meeting-content-section">
              <div class="content-header">
                <h3>会议内容：<span class="required-field">*</span></h3>
                <div class="upload-buttons">
                  <el-button type="primary" size="small" class="upload-btn">+文档上传</el-button>
                  <!-- <el-button type="primary" size="small" class="upload-btn">+录音上传</el-button> -->
                </div>
                <div class="upload-note">
                  注:建议通过word文档标识再上传
                </div>
              </div>
              <div class="content-input-area">
                <div class="content-input-area-note">
                <span style="color: #0369a1 ;font-size:12px;">（紫色部分为手动输入,供AI生成）</span>
                </div>
                <el-input
                  v-model="meetingMinutesForm.meetingContent"
                  type="textarea"
                  :rows="8"
                  placeholder="请输入文字或上传文件"
                  class="meeting-content-textarea readonly-textarea"
                  :title="meetingMinutesForm.meetingContent"
                  @click="openModal('meetingMinutesForm', 'meetingContent', '编辑会议内容', '请输入文字或上传文件')"
                  readonly
                />
              </div>
            </div>

            <!-- AI梳理会议内容 -->
            <div class="ai-process-section">
              <div class="minutes-header">
              <span style="color: #0369a1 ;font-size:12px;">（蓝色部分为AI根据紫色部分生成内容）</span>
              <div class="ai-process-button">
                <el-button 
                  type="primary" 
                  @click="generateProcessedContent" 
                  :loading="isAiProcessing"
                  class="ai-process-btn"
                >
                  AI梳理
                </el-button>
              </div>
              </div>
              <!-- <div class="ai-process-header">
                <h3>【AI梳理会议内容】</h3>
              </div> -->
              <div class="ai-process-output">
                <el-input
                  v-model="meetingMinutesForm.aiProcessedContent"
                  type="textarea"
                  :rows="6"
                  placeholder="AI将根据会议内容进行梳理和整理..."
                  class="ai-process-textarea"
                  readonly
                  :title="meetingMinutesForm.aiProcessedContent"
                />
              </div>
            </div>

            <!-- 会议纪要生成 -->
            <div class="meeting-minutes-section">
              <div class="minutes-header">
                <h3>会议纪要：</h3>
                <div class="minutes-buttons">
                  <el-button type="warning" size="small" class="export-btn">导出word</el-button>
                  <el-button type="primary" size="small" class="generate-btn" @click="generateMeetingMinutes">纪要生成</el-button>
                </div>
              </div>
              <div class="ai-hint">（蓝色部分为AI根据紫色部分生成内容）</div>
              <div class="minutes-output">
                <el-input
                  v-model="meetingMinutesForm.aiGeneratedMinutes"
                  type="textarea"
                  :rows="12"
                  placeholder="【AI生成】
202×年×月×日，××××主持召开××××会。会议就××××等×项议题进行了研究。会议经过充分讨论，形成以下会议纪要：
一、关于××××议题
会议决定，同意××××，×××负责，根据会议讨论情况，××××。
二、关于××××的议题
会议同意，××××
三、关于××××议题
会议认为，××××××××。
会议强调，××××××××。
会议决定，××××××××。"
                  class="minutes-textarea"
                  readonly
                  :title="meetingMinutesForm.aiGeneratedMinutes"
                />
              </div>
            </div>

            <!-- 参会人员信息 -->
            <div class="attendees-section">
              <div class="attendees-row">
                <span>出席：</span>
                <el-input 
                  v-model="meetingMinutesForm.attendees" 
                  placeholder="人员姓名、人员姓名..."
                  class="attendees-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.attendees"
                />
              </div>
              <div class="attendees-row">
                <span>列席：</span>
                <el-input 
                  v-model="meetingMinutesForm.nonVotingAttendees" 
                  placeholder="人员姓名、人员姓名..."
                  class="attendees-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.nonVotingAttendees"
                />
              </div>
              <div class="attendees-row">
                <span>请假：</span>
                <el-input 
                  v-model="meetingMinutesForm.absentees" 
                  placeholder="人员姓名、人员姓名..."
                  class="attendees-input auto-width-input"
                  size="small"
                  :title="meetingMinutesForm.absentees"
                />
              </div>
            </div>

          </div>
        </div>

        <!-- 个人文档 - 工作报告编写表单 -->
        <div v-else-if="selectedMainNav === 'personal' && selectedSubNav === 'report'" class="form-container">
          <div class="form-body personal-form-container">
            <!-- 顶部指令栏 -->
            <div class="work-report-instruction-bar">
              <span>帮我写一篇关于</span>
              <el-input 
                v-model="personalWorkReportForm.topic" 
                placeholder="主题"
                class="topic-input auto-width-input"
                size="small"
                :title="personalWorkReportForm.topic"
              />
              <span>的工作报告,要求包括:</span>
            </div>

            <!-- 主要输入字段 -->
            <div class="work-report-input-sections">
              <!-- 字数 -->
              <div class="work-report-input-section">
                <label>字数:</label>
                <el-input
                  v-model="personalWorkReportForm.wordCount"
                  placeholder="请输入"
                  class="word-count-input auto-width-input"
                  size="small"
                  :title="personalWorkReportForm.wordCount"
                />
              </div>

              <!-- 报告结构 -->
              <div class="work-report-input-section">
                <label>报告结构:</label>
                <el-input
                  v-model="personalWorkReportForm.structure"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入"
                  class="structure-textarea"
                  :title="personalWorkReportForm.structure"
                />
              </div>

              <!-- 报告内容 -->
              <div class="work-report-input-section">
                <label>报告内容:</label>
                <el-input
                  v-model="personalWorkReportForm.content"
                  type="textarea"
                  :rows="8"
                  placeholder="请输入"
                  class="content-textarea"
                  :title="personalWorkReportForm.content"
                />
              </div>
            </div>

          </div>
        </div>

        <!-- 个人文档 - 讲稿编写表单 -->
        <div v-else-if="selectedMainNav === 'personal' && selectedSubNav === 'speech'" class="form-container">
          <div class="form-body personal-form-container">
            <!-- 顶部指令栏 -->
            <div class="speech-instruction-bar">
              <span>帮我写一篇关于</span>
              <el-input 
                v-model="speechForm.topic" 
                placeholder="主题"
                class="topic-input auto-width-input"
                size="small"
                :title="speechForm.topic"
              />
              <span>的演讲稿,要求包括:</span>
            </div>

            <!-- 主要输入字段 -->
            <div class="speech-input-sections">
              <!-- 受众 -->
              <div class="speech-input-section">
                <label>受众:</label>
                <el-input
                  v-model="speechForm.audience"
                  placeholder="请输入"
                  class="audience-input auto-width-input"
                  size="small"
                  :title="speechForm.audience"
                />
              </div>

              <!-- 核心观点 -->
              <div class="speech-input-section">
                <label>核心观点:</label>
                <el-input
                  v-model="speechForm.coreViewpoint"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入"
                  class="core-viewpoint-textarea"
                  :title="speechForm.coreViewpoint"
                />
              </div>

              <!-- 案例/数据 -->
              <div class="speech-input-section">
                <label>案例/数据:</label>
                <el-input
                  v-model="speechForm.casesData"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入"
                  class="core-viewpoint-textarea"
                  :title="speechForm.casesData"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 工作报告编写表单 -->
        <div v-else-if="selectedMainNav === 'office' && selectedSubNav === 'work-report'" class="form-container">
          <div class="form-title">
            <h2>陕西建工第十一建设集团有限公司文件</h2>
          </div>
          
          <div class="form-body">
            <!-- 公司抬头 -->
            <div class="company-header">
              <!-- <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1> -->
              <div class="document-info">
                <div class="doc-number">
                  <el-input 
                    v-model="workReportForm.docNumber" 
                    placeholder="xxxx (202x) ×号"
                    class="doc-number-input auto-width-input"
                    size="small"
                    :title="workReportForm.docNumber"
                  />
                </div>
                <div class="issuer">
                  <span>签发人：</span>
                  <el-input 
                    v-model="workReportForm.issuer" 
                    placeholder="请输入签发人姓名"
                    class="issuer-input auto-width-input"
                    size="small"
                    :title="workReportForm.issuer"
                  />
                </div>
              </div>
            </div>

            <!-- 报告标题 -->
            <div class="report-title-section">
              <div class="title-row">
                <!-- <span>公司名称</span> -->
                <el-input 
                  v-model="workReportForm.companyName" 
                  placeholder="请输入公司名称"
                  class="company-name-input auto-width-input"
                  size="small"
                  :title="workReportForm.companyName"
                />
                <span class="title-main">关于</span>
                <el-input 
                  v-model="workReportForm.companyContent" 
                  placeholder="请输入内容"
                  class="company-name-input auto-width-input"
                  size="small"
                  :title="workReportForm.companyContent"
                />
                <span class="title-main">工作情况的报告</span>
              </div>
            </div>

            <!-- 主送单位和背景 -->
            <div class="context-section">
              <div class="context-row">
                <!-- <span>主送单位：</span> -->
                <el-input 
                  v-model="workReportForm.recipient" 
                  placeholder="请输入主送单位"
                  class="context-input auto-width-input"
                  size="small"
                  :title="workReportForm.recipient"
                />
              </div>
              <div class="context-row">
                <span>根据</span>
                <el-input 
                  v-model="workReportForm.basis" 
                  placeholder="请输入根据内容"
                  class="context-input auto-width-input"
                  size="small"
                  :title="workReportForm.basis"
                />
                <!-- <span>要求</span> -->
                <span>（或</span>
                <el-input 
                  v-model="workReportForm.alternative" 
                  placeholder="请输入替代内容"
                  class="context-input auto-width-input"
                  size="small"
                  :title="workReportForm.alternative"
                />
                </div>
                <div class="context-row">
                <span>以来），我们</span>
                <el-input 
                  v-model="workReportForm.background" 
                  placeholder="概述工作背景或基本情况"
                  class="context-input auto-width-input"
                  size="small"
                  :title="workReportForm.background"
                />
                <span>对</span>
                <el-input 
                  v-model="workReportForm.target" 
                  placeholder="请输入工作目标"
                  class="context-input auto-width-input"
                  size="small"
                  :title="workReportForm.target"
                />
              </div>
              <span>工作进行了认真总结。现将有关情况报告如下：</span>
            
            </div>

            <!-- 四个主要章节 -->
            <div class="report-sections">
              <!-- 第一章：工作基本情况及工作预期目标 -->
              <div class="report-section">
                <h3>一、工作基本情况及工作预期目标：</h3>
                <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
                <el-input
                  v-model="workReportForm.section1"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述工作基本情况及预期目标..."
                  class="manual-textarea-large"
                />
              </div>

              <!-- 第二章：对照预期目标达成的结果 -->
              <div class="report-section">
                <h3>二、对照预期目标达成的结果，主要做法和成绩，包括采取的办法、措施和产生的效果等：</h3>
                <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
                <el-input
                  v-model="workReportForm.section2"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述达成的结果、主要做法和成绩..."
                  class="manual-textarea-large"
                />
              </div>

              <!-- 第三章：存在的问题以及拟采取的对策措施 -->
              <div class="report-section">
                <h3>三、存在的问题以及拟采取的对策措施：</h3>
                <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
                <el-input
                  v-model="workReportForm.section3"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述存在的问题及对策措施..."
                  class="manual-textarea-large"
                />
              </div>

              <!-- 第四章：下一步工作安排及优化思路 -->
              <div class="report-section">
                <h3>四、下一步工作安排及优化思路：</h3>
                <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
                <el-input
                  v-model="workReportForm.section4"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述下一步工作安排及优化思路..."
                  class="manual-textarea-large"
                />
              </div>
            </div>

            <!-- AI生成区域 -->
            <div class="ai-generation-section">
              <div class="ai-section-header">
                <span class="ai-hint-large">（蓝色部分为AI根据紫色部分生成内容）</span>
                <el-button 
                  type="primary" 
                  @click="generateWorkReport" 
                  :loading="isGenerating"
                  class="ai-generate-btn-large"
                >
                  AI生成
                </el-button>
              </div>
                <el-input
                  v-model="workReportForm.aiGeneratedContent"
                  type="textarea"
                  :rows="12"
                  placeholder="[AI生成]
一、××××（工作基本情况及工作预期目标）
二、××××（对照预期目标达成的结果，主要做法和成绩，包括采取的办法、措施和产生的效果等）
三、××××（存在的问题以及拟采取的对策措施）
四、××××（下一步工作安排及优化思路）"
                  class="ai-textarea-large"
                  readonly
                />
            </div>

            <!-- 公司签名和日期 -->
            <div class="work-report-footer">
              <div class="footer-signature">
                <div class="company-signature">
                  <el-input 
                    v-model="workReportForm.engineeringCompany" 
                    placeholder="请输入工程公司名称"
                    class="engineering-company-input"
                    size="small"
                  />
                </div>
                </div><div class="footer-signature">
                <div class="signature-date">
                  <el-date-picker
                    v-model="workReportForm.signatureDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY年M月D日"
                    value-format="YYYY年M月D日"
                    class="signature-date-picker"
                  />
                </div>
              </div>
              
              <div class="footer-cc">
                <span>抄送：</span>
                <el-input 
                  v-model="workReportForm.ccRecipients" 
                  placeholder="姓名/单位、姓名/单位"
                  class="cc-input"
                  size="small"
                />
              </div>
              
              <div class="footer-unit-info">
                <div class="unit-table">
                  <div class="unit-cell">
                    <el-input 
                    v-model="workReportForm.unitName" 
                    placeholder="请输入单位规范简称"
                    class="engineering-company-input"
                    size="small"
                  />
                  </div>
                  <div class="unit-cell">
                    <span>办公室</span>
                  </div>
                </div>
              </div>
              
              <div class="footer-print-info">
                <span class="print-date">
                  <el-date-picker
                    v-model="workReportForm.printDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY年M月D日"
                    value-format="YYYY年M月D日"
                    class="print-date-picker"
                  />
                </span>
              </div>
            </div>

          </div>
        </div>

        <!-- 其他文档类型表单 -->
     <!--    <div v-else-if="hasSelectedDocType" class="form-container">
          <div class="form-title">
            <h2>{{ getCurrentDocTypeName() }}</h2>
          </div>
          <div class="form-body">
            <div class="placeholder-form">
              <p>{{ getCurrentDocTypeName() }}表单正在开发中...</p>
              <el-input
                type="textarea"
                :rows="15"
                placeholder="请输入内容..."
                v-model="generalContent"
                class="textarea-input"
              />
              <div class="submit-section">
            <el-button
              type="primary"
                  size="large" 
                  @click="submitGeneral"
                  class="submit-btn"
                >
                  发送
            </el-button>
          </div>
        </div>
              </div>
                </div> -->
        </div>
        
        <!-- 续写功能表单 -->
        <div v-if="selectedMainNav === 'continue'" class="form-container">
          <div class="form-body">
            <div class="continue-form">
              <!-- 续写文本输入 -->
              <div class="continue-section">
                <h3>帮我续写以下文本:</h3>
                <el-input
                  v-model="continueForm.text"
                  type="textarea"
                  :rows="8"
                  placeholder="请输入续写内容"
                  class="continue-textarea"
                />
              </div>

              <!-- 续写要求输入 -->
              <div class="continue-section">
                <h3>续写要求:</h3>
                <el-input
                  v-model="continueForm.requirements"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入续写要求,如字数要求"
                  class="continue-textarea"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 润色功能表单 -->
        <div v-if="selectedMainNav === 'polish'" class="form-container">
          <div class="form-body">
            <div class="polish-form">
              <!-- 润色文本输入 -->
              <div class="polish-section">
                <h3>帮我润色以下文本:</h3>
                <el-input
                  v-model="polishForm.text"
                  type="textarea"
                  :rows="8"
                  placeholder="请输入文本或上传文本"
                  class="polish-textarea"
                />
              </div>

              <!-- 润色要求选择 -->
              <div class="polish-section">
                <h3>润色要求是:</h3>
                <div class="polish-options">
                  <el-radio-group v-model="polishForm.style">
                    <div class="polish-option">
                      <el-radio value="serious">严肃、正式</el-radio>
                      <span class="style-description">（用于正式的讲演和通知、部分公众号文章编写）</span>
                    </div>
                    <div class="polish-option">
                      <el-radio value="lively">活泼</el-radio>
                      <span class="style-description">（用于部分公众号文章编写）</span>
                    </div>
                    <div class="polish-option">
                      <el-radio value="academic">学术</el-radio>
                      <span class="style-description">（论文、专利等编写）</span>
                    </div>
                    <div class="polish-option">
                      <el-radio value="check">漏洞检查</el-radio>
                      <span class="style-description">（用于日常交流 (微信群通知等) 检查逻辑漏洞、称呼错误、文字错误等）</span>
                    </div>
                    <div class="polish-option">
                      <el-radio value="other">其他</el-radio>
                      <el-input 
                        v-model="polishForm.otherStyle" 
                        placeholder="请输入"
                        class="other-style-input auto-width-input"
                        size="small"
                        :disabled="polishForm.style !== 'other'"
                      />
                      <span class="style-hint">（勾选上可输入）</span>
                    </div>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 默认状态 -->
        <div v-if="!hasSelectedDocType" class="empty-state">
          <div class="empty-content">
            <div class="empty-icon">📝</div>
            <h3>选择文档类型开始编写</h3>
            <p>请从上方导航选择需要编写的文档类型</p>
          </div>
        </div>
        
        <!-- 统一的生成按钮 -->
        <div v-if="hasSelectedDocType" class="unified-submit-section">
          <el-button
            type="primary"
            size="large"
            @click="handleGenerate"
            :loading="isGenerating"
            class="submit-btn"
          >
            生成
          </el-button>
        </div>
      </div>
      
      <!-- 右侧预览面板 -->
      <div class="preview-section">
        <div v-if="previewContent" class="preview-container">
          <div class="preview-header">
            <h3>预览区域</h3>
          </div>
          <div class="preview-body">
            <div v-html="getRenderedContent(previewContent)"></div>
          </div>
          <div class="preview-actions">
            <el-button 
              type="primary" 
              @click="regenerateContent"
              :loading="isRegenerating"
              class="action-btn"
            >
              重新生成
            </el-button>
            <el-button 
              type="success" 
              @click="exportContent"
              class="action-btn"
            >
              导出
            </el-button>
          </div>
        </div>

        <div v-else class="preview-empty">
          <div class="empty-preview-content">
            <div class="preview-icon">👁️</div>
            <h3>预览区域</h3>
            <p>请在左侧填写内容并点击生成按钮</p>
          </div>
      </div>
    </div>
</div>
  </div>

  <!-- 弹窗输入组件 -->
  <el-dialog
    v-model="modalVisible"
    :title="modalTitle"
    width="80%"
    :before-close="handleModalClose"
    class="text-modal"
  >
    <div class="modal-content">
      <div class="modal-tips">
        <el-icon><InfoFilled /></el-icon>
        <span>提示：使用 Ctrl+Enter 快速保存，ESC 取消编辑</span>
      </div>
      <el-input
        v-model="modalContent"
        type="textarea"
        :rows="15"
        :placeholder="modalPlaceholder"
        class="modal-textarea"
        autofocus
      />
    </div>
    <template #footer>
      <div class="modal-footer">
        <el-button @click="handleModalClose">取消 (ESC)</el-button>
        <el-button type="primary" @click="handleModalConfirm">确定 (Ctrl+Enter)</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { generateDocument, regenerateDocument, exportDocument, mockGenerateDocument, processMeetingContent, submitMeeting, downloadMeetingMinutes, generateReplyLetter } from '@/api/document'
import { marked } from 'marked'

// 配置marked选项
marked.setOptions({
  breaks: true,
  gfm: true
})

// 弹窗相关状态
const modalVisible = ref(false)
const modalTitle = ref('')
const modalContent = ref('')
const modalPlaceholder = ref('')
const currentField = ref('')
const currentForm = ref('')

// 主导航配置
const mainNavs = [
  { label: '办公文档', value: 'office' },
  { label: '会议纪要', value: 'meeting' },
  { label: '个人文档', value: 'personal' },
  { label: '续写', value: 'continue' },
  { label: '润色', value: 'polish' }
]

// 子导航配置
const subNavConfigs: Record<string, Array<{ label: string; value: string }>> = {
  office: [
    { label: '通知编写', value: 'notice' },
    { label: '工作报告', value: 'work-report' },
    { label: '新闻编写', value: 'news' },
    { label: '函编写', value: 'narrative' },
    { label: '复函编写', value: 'retelling' },
    { label: '请示文件', value: 'directive' }
  ],
  personal: [
    { label: '工作报告', value: 'report' },
    { label: '讲稿编写', value: 'speech' }
  ]
}

// 响应式数据
const selectedMainNav = ref('')
const selectedSubNav = ref('')
const isGenerating = ref(false)
const isPageLoading = ref(false) // 页面级加载状态
const isAiProcessing = ref(false) // AI梳理按钮的加载状态

// 智能内容渲染函数 - 自动检测HTML、Markdown或混合格式
const getRenderedContent = (content: string): string => {
  if (!content) return ''
  
  console.log('渲染内容:', content.substring(0, 100))
  
  // 检测内容是否已经是HTML格式
  const hasHTMLTags = /<[a-z][\s\S]*>/i.test(content)
  
  // 检测是否包含Markdown语法
  const hasMarkdown = /#{1,6}\s+/.test(content) || /^\s*[-*]\s+/m.test(content) || /\*\*.*?\*\*/.test(content)
  
  console.log('检测结果 - HTML:', hasHTMLTags, 'Markdown:', hasMarkdown)
  
  if (hasHTMLTags) {
    // 包含HTML标签，直接返回（让浏览器渲染HTML）
    console.log('检测到HTML内容，直接返回')
    return content
  } else if (hasMarkdown) {
    // 纯Markdown格式
    console.log('检测到Markdown格式内容，进行渲染')
    try {
      const result = marked.parse(content) as string
      console.log('Markdown渲染结果:', result.substring(0, 100))
      return result
    } catch (error) {
      console.error('Markdown渲染失败:', error)
      return content.replace(/\n/g, '<br>')
    }
  } else {
    // 纯文本格式
    console.log('检测到纯文本格式内容，处理换行')
    return content.replace(/\n/g, '<br>')
  }
}

const isRegenerating = ref(false)
const previewContent = ref('')
const previewMode = ref<'html' | 'markdown'>('html')
const markdownContent = ref('')
const generalContent = ref('')

// 通知表单数据
const noticeForm = ref({
  date: '',//日期
  meetingName: '',//会议名称
  startDate: '',//开始日期
  endDate: '',//结束日期
  location: '',//地点
  host: '',//主持人
  participants: '',//参会人员
  manualContent: '',//手动输入内容
  aiContent: '',//AI生成内容
  requirements: '',//要求
  companyName: '',//公司名称
  documentDate: ''//文档日期
})

// 新闻表单数据
const newsForm = ref({
  topic: '',//主题
  timeLocation: '',//时间地点
  people: '',//人物
  eventProcess: '',//事件过程
  eventResult: '',//事件结果
  writingStyle: 'serious',//写作风格
  otherStyle: '',//其他风格
  aiGeneratedContent: ''//AI生成内容
})

// 会议纪要表单数据
const meetingMinutesForm = ref({
  office: '',//办公室
  date: '',//日期
  meetingTitle: '',//会议主题
  time: '',//时间
  location: '',//地点
  host: '',//主持人
  meetingContent: '',//会议内容
  aiProcessedContent: '',//AI处理内容
  aiGeneratedMinutes: '',//AI生成纪要
  attendees: '',//参会人员
  nonVotingAttendees: '',//非投票参会人员
  absentees: '',//缺席人员
  docNumber: ''//文档编号
})

// 个人工作报告表单数据
const personalWorkReportForm = ref({
  topic: '',//主题
  wordCount: '',//字数
  structure: '',//结构
  content: ''//内容
})

// 讲稿编写表单数据
const speechForm = ref({
  topic: '',//主题
  audience: '',//受众
  coreViewpoint: '',//核心观点
  casesData: ''//案例数据
})

// 续写表单数据
const continueForm = ref({
  text: '',//文本
  requirements: ''//要求
})

// 润色表单数据
const polishForm = ref({
  text: '',//文本
  style: 'serious',//风格
  otherStyle: ''//其他风格
})

// 函表单数据
const letterForm = ref({
  companyName: '',//公司名称
  subject: '',//主题
  docNumber: '',//文档编号
  recipient: '',//收件人
  purpose: '',//目的
  basis: '',//依据
  action: '',//行动
  basicInfo: '',//基本信息
  necessity: '',//必要性
  opinion: '',//意见
  aiGeneratedContent: '',//AI生成内容
  contactName: '',//联系人
  contactPhone: '',//联系人电话
  letterDate: ''//信件日期
})

// 复函表单数据
const replyLetterForm = ref({
  docNumber: '',//文档编号
  originalCompany: '',//原公司
  originalLetter: '',//原信件
  recipient: '',//收件人
  originalDocNumber: '',
  replyContent: '',//回复内容
  aiGeneratedContent: '',//AI生成内容
  replyDate: ''//回复日期
})

// 请示表单数据
const requestForm = ref({
  docNumber: '',//文档编号
  signatory: '',//签名人
  companyName: '',//公司名称
  subject: '',//主题
  recipient: '',//收件人
  purpose: '',//目的
  basis: '',//依据
  intent: '',//意图
  basicSituation: '',//基本情况
  necessity: '',//必要性
  specificPlan: '',//具体计划
  aiGeneratedContent: '',//AI生成内容
  contactName: '',//联系人
  contactPhone: '',//联系人电话
  requestDate: '',//请示日期
  ccRecipients: '',//抄送人
  unitAbbreviation: '',//单位简称
  printDate: ''//打印日期
})

// 工作报告表单数据
const workReportForm = ref({
  docNumber: '',//文档编号
  issuer: '',//签发人
  companyName: '',//公司名称
  companyContent: '',//公司内容
  recipient: '',//收件人
  basis: '',//依据
  requirements: '',//要求
  alternative: '',//备选方案
  background: '',//背景
  target: '',//目标
  section1: '',//工作基本情况及工作预期目标
  section2: '',//工作开展情况
  section3: '',//存在问题
  section4: '',//下一步工作计划
  aiGeneratedContent: '',//AI生成内容
  engineeringCompany: '',//工程公司
  signatureDate: '',//签发日期
  ccRecipients: '',//抄送人
  printDate: '',//打印日期
  unitName: ''//单位名称
})

// 计算属性
const currentSubNavs = computed(() => {
  return subNavConfigs[selectedMainNav.value] || []
})

const hasSelectedDocType = computed(() => {
  return selectedMainNav.value && (
    selectedMainNav.value === 'meeting' ||
    selectedMainNav.value === 'continue' ||
    selectedMainNav.value === 'polish' ||
    selectedSubNav.value
  )
})

// 方法
const goBack = () => {
  // 使用路由返回上一页
  if (window.history.length > 1) {
    window.history.back()
  } else {
    // 如果没有历史记录，跳转到首页
    window.location.href = '/'
  }
}

// 自动调整输入框宽度
const adjustInputWidth = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target && target.value) {
    // 创建一个临时span来计算文本宽度
    const span = document.createElement('span')
    span.style.visibility = 'hidden'
    span.style.position = 'absolute'
    span.style.whiteSpace = 'nowrap'
    span.style.fontSize = window.getComputedStyle(target).fontSize
    span.style.fontFamily = window.getComputedStyle(target).fontFamily
    span.style.fontWeight = window.getComputedStyle(target).fontWeight
    span.textContent = target.value
    
    document.body.appendChild(span)
    const textWidth = span.offsetWidth
    document.body.removeChild(span)
    
    // 设置最小宽度和最大宽度
    const minWidth = 200
    const maxWidth = 600
    const newWidth = Math.max(Math.min(textWidth + 40, maxWidth), minWidth)
    
    // 直接设置输入框的宽度
    target.style.width = `${newWidth}px`
    
    // 如果是Element Plus的输入框，需要调整其父容器
    const inputWrapper = target.closest('.el-input') as HTMLElement
    if (inputWrapper) {
      inputWrapper.style.width = `${newWidth}px`
    }
  }
}

// 监听输入框内容变化
const setupAutoWidth = () => {
  setTimeout(() => {
    const inputs = document.querySelectorAll('.el-input__inner, .el-textarea__inner')
    inputs.forEach(input => {
      if (input instanceof HTMLElement) {
        input.addEventListener('input', adjustInputWidth)
        input.addEventListener('focus', adjustInputWidth)
      }
    })
  }, 100)
}

const selectMainNav = (value: string) => {
  selectedMainNav.value = value
  selectedSubNav.value = ''
  previewContent.value = ''
  
  // 如果有子导航，自动选择第一个
  const subNavs = subNavConfigs[value]
  if (subNavs && subNavs.length > 0) {
    selectedSubNav.value = subNavs[0].value
  }
}

const selectSubNav = (value: string) => {
  selectedSubNav.value = value
  previewContent.value = ''
}

const getCurrentDocTypeName = () => {
  if (selectedMainNav.value === 'meeting') return '会议纪要'
  if (selectedMainNav.value === 'continue') return '续写'
  if (selectedMainNav.value === 'polish') return '润色'
  
  const docTypeMap: Record<string, string> = {
    'notice': '通知编写',
    'work-report': '工作报告',
    'news': '新闻编写',
    'narrative': '述编写',
    'retelling': '复述编写',
    'directive': '指示文件',
    'report': '工作报告',
    'speech': '讲稿编写'
  }
  
  return docTypeMap[selectedSubNav.value] || '文档编写'
}

// 弹窗相关方法
const openModal = (form: string, field: string, title: string, placeholder: string) => {
  currentForm.value = form
  currentField.value = field
  modalTitle.value = title
  modalPlaceholder.value = placeholder
  
  // 获取当前字段的值
  if (form === 'noticeForm') {
    modalContent.value = (noticeForm.value as any)[field] || ''
  } else if (form === 'newsForm') {
    modalContent.value = (newsForm.value as any)[field] || ''
  } else if (form === 'letterForm') {
    modalContent.value = (letterForm.value as any)[field] || ''
  } else if (form === 'replyLetterForm') {
    modalContent.value = (replyLetterForm.value as any)[field] || ''
  } else if (form === 'requestForm') {
    modalContent.value = (requestForm.value as any)[field] || ''
  } else if (form === 'meetingMinutesForm') {
    modalContent.value = (meetingMinutesForm.value as any)[field] || ''
  }
  
  modalVisible.value = true
}

const handleModalConfirm = () => {
  // 保存内容到对应的表单字段
  if (currentForm.value === 'noticeForm') {
    (noticeForm.value as any)[currentField.value] = modalContent.value
  } else if (currentForm.value === 'newsForm') {
    (newsForm.value as any)[currentField.value] = modalContent.value
  } else if (currentForm.value === 'letterForm') {
    (letterForm.value as any)[currentField.value] = modalContent.value
  } else if (currentForm.value === 'replyLetterForm') {
    (replyLetterForm.value as any)[currentField.value] = modalContent.value
  } else if (currentForm.value === 'requestForm') {
    (requestForm.value as any)[currentField.value] = modalContent.value
  } else if (currentForm.value === 'meetingMinutesForm') {
    (meetingMinutesForm.value as any)[currentField.value] = modalContent.value
  }
  
  modalVisible.value = false
  ElMessage.success('内容已保存')
}

const handleModalClose = () => {
  modalVisible.value = false
  modalContent.value = ''
  currentField.value = ''
  currentForm.value = ''
}

// 键盘快捷键支持
const handleKeydown = (event: KeyboardEvent) => {
  if (modalVisible.value) {
    if (event.ctrlKey && event.key === 'Enter') {
      // Ctrl+Enter 保存并关闭
      handleModalConfirm()
    } else if (event.key === 'Escape') {
      // ESC 取消
      handleModalClose()
    }
  }
}

// 监听键盘事件
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

const generateNoticeContent = async () => {
  if (!noticeForm.value.manualContent.trim() && !noticeForm.value.participants.trim()) {
    ElMessage.warning('请先输入一些内容作为AI生成的基础')
    return
  }
  
  isGenerating.value = true
  
  try {
    // 调用后端API生成内容
    const response = await generateDocument({
      type: 'office',
      subType: 'notice',
      content: noticeForm.value
    })
    
    if (response.success) {
      noticeForm.value.aiContent = response.data.content
      ElMessage.success('AI内容生成成功')
    } else {
      ElMessage.error(response.message || '生成失败')
    }
  } catch (error) {
    // 如果API调用失败，使用模拟数据
    console.warn('API调用失败，使用模拟数据:', error)
    const mockResponse = await mockGenerateDocument({
      type: 'office',
      subType: 'notice',
      content: noticeForm.value
    })
    
    if (mockResponse.success) {
      noticeForm.value.aiContent = mockResponse.data.content
      ElMessage.success('AI内容生成成功（模拟数据）')
    } else {
      ElMessage.error('生成失败，请重试')
    }
  } finally {
    isGenerating.value = false
  }
}

const submitNotice = () => {
  // 验证必填项
  if (!noticeForm.value.date || !noticeForm.value.meetingName) {
    ElMessage.warning('请填写会议日期和主题')
    return
  }
  
  // 生成预览内容
  const htmlContent = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">通知</h1>
      </div>
      
      <div class="doc-content">
        <p class="intro">根据集团公司工作安排，定于${noticeForm.value.date}召开${noticeForm.value.meetingName}会议，现将有关事项安排如下：</p>
        
        <h2>一、会议安排</h2>
        ${noticeForm.value.endDate ? `<p><strong>时间：</strong>${noticeForm.value.endDate}</p>` : ''}
        ${noticeForm.value.location ? `<p><strong>地点：</strong>${noticeForm.value.location}</p>` : ''}
        ${noticeForm.value.host ? `<p><strong>主持人：</strong>${noticeForm.value.host}</p>` : ''}
        
        ${noticeForm.value.participants ? `
          <h2>二、参会人员</h2>
          <div class="content-text">${noticeForm.value.participants.replace(/\n/g, '<br>')}</div>
        ` : ''}
        
        <h2>三、会议内容</h2>
        ${noticeForm.value.manualContent ? `<div class="content-text">${noticeForm.value.manualContent.replace(/\n/g, '<br>')}</div>` : ''}
        ${noticeForm.value.aiContent ? `<div class="content-text">${noticeForm.value.aiContent.replace(/\n/g, '<br>')}</div>` : ''}
        
        ${noticeForm.value.requirements ? `
          <h2>四、会议要求</h2>
          <div class="content-text">${noticeForm.value.requirements.replace(/\n/g, '<br>')}</div>
        ` : ''}
        
        <div class="doc-footer">
          <p class="signature">
            <strong>${noticeForm.value.companyName || '工程公司办公室名称'}</strong><br>
            ${noticeForm.value.documentDate || new Date().toLocaleDateString('zh-CN')}
          </p>
        </div>
      </div>
    </div>
  `
  
  const markdownText = `# 通知

根据集团公司工作安排，定于${noticeForm.value.date}召开${noticeForm.value.meetingName}会议，现将有关事项安排如下：

## 一、会议安排

${noticeForm.value.startDate && noticeForm.value.endDate ? `**时间：**${noticeForm.value.startDate} 至 ${noticeForm.value.endDate}` : ''}
${noticeForm.value.location ? `**地点：**${noticeForm.value.location}` : ''}
${noticeForm.value.host ? `**主持人：**${noticeForm.value.host}` : ''}

${noticeForm.value.participants ? `
## 二、参会人员

${noticeForm.value.participants}
` : ''}

## 三、会议内容

${noticeForm.value.manualContent ? noticeForm.value.manualContent : ''}
${noticeForm.value.aiContent ? noticeForm.value.aiContent : ''}

${noticeForm.value.requirements ? `
## 四、会议要求

${noticeForm.value.requirements}
` : ''}

---

**${noticeForm.value.companyName || '工程公司办公室名称'}**  
${noticeForm.value.documentDate || new Date().toLocaleDateString('zh-CN')}`
  
  previewContent.value = htmlContent
  markdownContent.value = markdownText
  
  ElMessage.success('通知已生成，请查看右侧预览')
}

const submitGeneral = () => {
  if (!generalContent.value.trim()) {
    ElMessage.warning('请输入内容')
    return
  }
  
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">${getCurrentDocTypeName()}</h1>
      </div>
      
      <div class="doc-content">
        <div class="content-text">${generalContent.value.replace(/\n/g, '<br>')}</div>
        
        <div class="doc-footer">
          <p class="signature">
            <strong>十一建工程公司</strong><br>
            ${new Date().toLocaleDateString('zh-CN')}
          </p>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success(`${getCurrentDocTypeName()}已生成，请查看右侧预览`)
}

const generateWorkReport = async () => {
  if (!workReportForm.value.section1.trim() || !workReportForm.value.section2.trim() || 
      !workReportForm.value.section3.trim() || !workReportForm.value.section4.trim()) {
    ElMessage.warning('请先填写四个主要章节的内容')
    return
  }

  isGenerating.value = true

  try {
    // 模拟AI生成
    await new Promise(resolve => setTimeout(resolve, 3000))

    workReportForm.value.aiGeneratedContent = `
      <div class="document-preview">
        <div class="doc-header">
          <h1 class="doc-title">工作报告</h1>
        </div>
        
        <div class="doc-content">
          <div class="company-header">
            <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1>
            <div class="document-info">
              <div class="doc-number">
                <span>${workReportForm.value.docNumber}</span>
              </div>
              <div class="issuer">
                <span>签发人：</span>
                <span>${workReportForm.value.issuer}</span>
              </div>
            </div>
          </div>

          <div class="report-title-section">
            <div class="title-row">
              <span>${workReportForm.value.companyName}</span>
              <span class="title-main">关于</span>
              <span class="title-main">工作情况的报告</span>
            </div>
          </div>

          <div class="context-section">
            <div class="context-row">
              <span>主送单位：</span>
              <span>${workReportForm.value.recipient}</span>
            </div>
            <div class="context-row">
              <span>根据</span>
              <span>${workReportForm.value.basis}</span>
              <span>要求</span>
              <span>${workReportForm.value.requirements}</span>
              <span>（或</span>
              <span>${workReportForm.value.alternative}</span>
              <span>以来），我们</span>
              <span>${workReportForm.value.background}</span>
              <span>对</span>
              <span>${workReportForm.value.target}</span>
            </div>
            <div class="context-summary">
              <span>工作进行了认真总结。现将有关情况报告如下：</span>
            </div>
          </div>

          <div class="report-sections">
            <div class="report-section">
              <h3>一、工作基本情况及工作预期目标：</h3>
              <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
              <div class="content-text">${workReportForm.value.section1.replace(/\n/g, '<br>')}</div>
            </div>

            <div class="report-section">
              <h3>二、对照预期目标达成的结果，主要做法和成绩，包括采取的办法、措施和产生的效果等：</h3>
              <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
              <div class="content-text">${workReportForm.value.section2.replace(/\n/g, '<br>')}</div>
            </div>

            <div class="report-section">
              <h3>三、存在的问题以及拟采取的对策措施：</h3>
              <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
              <div class="content-text">${workReportForm.value.section3.replace(/\n/g, '<br>')}</div>
            </div>

            <div class="report-section">
              <h3>四、下一步工作安排及优化思路：</h3>
              <div class="section-note">（紫色部分为手动输入，供AI生成）</div>
              <div class="content-text">${workReportForm.value.section4.replace(/\n/g, '<br>')}</div>
            </div>
          </div>

          <div class="ai-generation-section">
            <div class="ai-section-header">
              <span class="ai-hint-large">（蓝色部分为AI根据紫色部分生成内容）</span>
            </div>
            <div class="ai-output-area">
              <h4 class="ai-output-title">[AI生成]</h4>
              <div class="content-text">${workReportForm.value.aiGeneratedContent.replace(/\n/g, '<br>')}</div>
            </div>
          </div>

          <div class="work-report-footer">
            <div class="footer-signature">
              <div class="company-signature">
                <span>陕西建工第十一建设集团有限公司</span>
                <span>${workReportForm.value.engineeringCompany}</span>
                <span>工程公司</span>
              </div>
              <div class="signature-date">
                <span>${workReportForm.value.signatureDate || new Date().toLocaleDateString('zh-CN')}</span>
              </div>
            </div>
            
            <div class="footer-cc">
              <span>抄送：</span>
              <span>${workReportForm.value.ccRecipients}</span>
            </div>
            
            <div class="footer-unit-info">
              <div class="unit-table">
                <div class="unit-cell">
                  <span>单位规范简称</span>
                </div>
                <div class="unit-cell">
                  <span>办公室</span>
                </div>
              </div>
            </div>
            
            <div class="footer-print-info">
              <span class="print-date">
                <span>${workReportForm.value.printDate || new Date().toLocaleDateString('zh-CN')}</span>
              </span>
              <span class="print-seal">印</span>
            </div>
          </div>
        </div>
      </div>
    `

    ElMessage.success('工作报告已生成，请查看右侧预览')
  } catch (error) {
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const generateNewsArticle = async () => {
  if (!newsForm.value.topic.trim() || !newsForm.value.timeLocation.trim() || 
      !newsForm.value.people.trim() || !newsForm.value.eventProcess.trim() || 
      !newsForm.value.eventResult.trim()) {
    ElMessage.warning('请先填写所有必填项')
    return
  }

  isGenerating.value = true

  try {
    // 模拟AI生成
    await new Promise(resolve => setTimeout(resolve, 3000))

    const styleText = newsForm.value.writingStyle === 'other' 
      ? newsForm.value.otherStyle 
      : {
          'serious': '严肃、正式',
          'lively': '活泼',
          'literary': '文艺清新',
          'inspirational': '励志正能量'
        }[newsForm.value.writingStyle]

    newsForm.value.aiGeneratedContent = `根据您提供的信息，AI已生成一篇${styleText}风格的新闻文章：

【新闻标题】
${newsForm.value.topic}

【时间地点】
${newsForm.value.timeLocation}

【涉及人物】
${newsForm.value.people}

【事件经过】
${newsForm.value.eventProcess}

【事件结果】
${newsForm.value.eventResult}

【新闻正文】
${newsForm.value.topic}事件引起了广泛关注。根据现场情况，该事件展现了...（AI将根据您的具体内容生成完整的新闻文章）`

    ElMessage.success('新闻文章已生成，请查看下方内容')
  } catch (error) {
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const submitNews = () => {
  if (!newsForm.value.aiGeneratedContent.trim()) {
    ElMessage.warning('请先点击AI生成按钮生成新闻内容')
    return
  }

  // 生成预览内容
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">新闻文章</h1>
      </div>
      
      <div class="doc-content">
        <div class="news-preview">
          <h2>${newsForm.value.topic}</h2>
          <div class="news-meta">
            <p><strong>时间地点：</strong>${newsForm.value.timeLocation}</p>
            <p><strong>涉及人物：</strong>${newsForm.value.people}</p>
            <p><strong>撰写风格：</strong>${newsForm.value.writingStyle === 'other' ? newsForm.value.otherStyle : {
              'serious': '严肃、正式',
              'lively': '活泼',
              'literary': '文艺清新',
              'inspirational': '励志正能量'
            }[newsForm.value.writingStyle]}</p>
          </div>
          
          <div class="news-content">
            <h3>事件经过：</h3>
            <div class="content-text">${newsForm.value.eventProcess.replace(/\n/g, '<br>')}</div>
            
            <h3>事件结果：</h3>
            <div class="content-text">${newsForm.value.eventResult.replace(/\n/g, '<br>')}</div>
            
            <h3>AI生成内容：</h3>
            <div class="content-text">${newsForm.value.aiGeneratedContent.replace(/\n/g, '<br>')}</div>
          </div>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success('新闻已生成，请查看右侧预览')
}

const generateLetterContent = async () => {
  if (!letterForm.value.basicInfo.trim() || !letterForm.value.necessity.trim() || 
      !letterForm.value.opinion.trim()) {
    ElMessage.warning('请先填写三个主要章节的内容')
    return
  }

  isGenerating.value = true

  try {
    // 模拟AI生成
    await new Promise(resolve => setTimeout(resolve, 3000))

    letterForm.value.aiGeneratedContent = `根据您提供的信息，AI已生成函件内容：

一、基本情况
${letterForm.value.basicInfo}

二、必要性和可行性及其意义
${letterForm.value.necessity}

三、我们的意见
${letterForm.value.opinion}

以上内容已根据您提供的信息进行了优化和完善，确保函件的专业性和完整性。`

    ElMessage.success('函件内容已生成，请查看下方内容')
  } catch (error) {
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const submitLetter = () => {
  if (!letterForm.value.companyName || !letterForm.value.subject || 
      !letterForm.value.recipient || !letterForm.value.purpose || 
      !letterForm.value.basis || !letterForm.value.action || 
      !letterForm.value.basicInfo || !letterForm.value.necessity || 
      !letterForm.value.opinion) {
    ElMessage.warning('请填写所有必填项')
    return
  }

  // 生成预览内容
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">函件</h1>
      </div>
      
      <div class="doc-content">
        <div class="letter-preview">
          <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1>
          
          <div class="letter-title">
            <h2>${letterForm.value.companyName}关于${letterForm.value.subject}的函</h2>
            <p class="doc-number">${letterForm.value.docNumber || '××××函〔202×〕 ×号'}</p>
          </div>
          
          <div class="recipient-info">
            <p><strong>主送单位：</strong>${letterForm.value.recipient}</p>
          </div>
          
          <div class="letter-intro">
            <p>为了${letterForm.value.purpose}，根据${letterForm.value.basis}，我们拟${letterForm.value.action}。现将有关情况和我们的意见函告如下：</p>
          </div>
          
          <div class="letter-body">
            <h3>一、基本情况</h3>
            <div class="content-text">${letterForm.value.basicInfo.replace(/\n/g, '<br>')}</div>
            
            <h3>二、必要性和可行性及其意义</h3>
            <div class="content-text">${letterForm.value.necessity.replace(/\n/g, '<br>')}</div>
            
            <h3>三、意见</h3>
            <div class="content-text">${letterForm.value.opinion.replace(/\n/g, '<br>')}</div>
          </div>
          
          <div class="ai-generated-content">
            <h3>AI生成内容：</h3>
            <div class="content-text">${letterForm.value.aiGeneratedContent ? letterForm.value.aiGeneratedContent.replace(/\n/g, '<br>') : 'AI生成内容将显示在这里...'}</div>
          </div>
          
          <div class="letter-closing">
            <p>此函/特此函询(商)/特此函告/请即复函!</p>
          </div>
          
          <div class="contact-info">
            <p><strong>联系人：</strong>${letterForm.value.contactName || '待填写'}</p>
            <p><strong>电话：</strong>${letterForm.value.contactPhone || '待填写'}</p>
            <p><strong>日期：</strong>${letterForm.value.letterDate || new Date().toLocaleDateString('zh-CN')}</p>
          </div>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success('函件已生成，请查看右侧预览')
}

const generateReplyContent = async () => {
  if (!replyLetterForm.value.replyContent.trim()) {
    ElMessage.warning('请先填写答复内容')
    return
  }

  isGenerating.value = true

  try {
    const response = await generateReplyLetter({
      meeting_str: replyLetterForm.value.replyContent
    })

    if (response.success && response.data) {
      replyLetterForm.value.aiGeneratedContent = response.data
    ElMessage.success('复函内容已生成，请查看下方内容')
    } else {
      ElMessage.error(response.message || '生成失败，请重试')
    }
  } catch (error) {
    console.error('生成复函内容失败:', error)
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const submitReplyLetter = () => {
  if (!replyLetterForm.value.originalCompany || !replyLetterForm.value.originalLetter || 
      !replyLetterForm.value.recipient || !replyLetterForm.value.originalDocNumber || 
      !replyLetterForm.value.replyContent) {
    ElMessage.warning('请填写所有必填项')
    return
  }

  // 生成预览内容
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">复函</h1>
      </div>
      
      <div class="doc-content">
        <div class="reply-letter-preview">
          <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1>
          
          <div class="doc-number">
            <p>${replyLetterForm.value.docNumber || '××××函〔202×〕 ×号'}</p>
          </div>
          
          <div class="reply-title">
            <h2>关于对${replyLetterForm.value.originalCompany}《${replyLetterForm.value.originalLetter}》的复函</h2>
          </div>
          
          <div class="recipient-info">
            <p><strong>主送单位：</strong>${replyLetterForm.value.recipient}</p>
          </div>
          
          <div class="letter-intro">
            <p>《${replyLetterForm.value.originalDocNumber}》（发文字号）已收悉。经我公司研究讨论，现函复如下：</p>
          </div>
          
          <div class="reply-body">
            <div class="content-text">${replyLetterForm.value.replyContent.replace(/\n/g, '<br>')}</div>
          </div>
          
          <div class="ai-generated-content">
            <h3>AI生成内容：</h3>
            <div class="content-text">${replyLetterForm.value.aiGeneratedContent ? replyLetterForm.value.aiGeneratedContent.replace(/\n/g, '<br>') : 'AI生成内容将显示在这里...'}</div>
          </div>
          
          <div class="letter-closing">
            <p>特此函复！</p>
          </div>
          
          <div class="contact-info">
            <p><strong>日期：</strong>${replyLetterForm.value.replyDate || new Date().toLocaleDateString('zh-CN')}</p>
          </div>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success('复函已生成，请查看右侧预览')
}

const generateRequestContent = async () => {
  if (!requestForm.value.basicSituation.trim() || !requestForm.value.necessity.trim() || 
      !requestForm.value.specificPlan.trim()) {
    ElMessage.warning('请先填写三个主要章节的内容')
    return
  }

  isGenerating.value = true

  try {
    // 模拟AI生成
    await new Promise(resolve => setTimeout(resolve, 3000))

    requestForm.value.aiGeneratedContent = `根据您提供的信息，AI已生成请示文件内容：

一、基本情况及面临的问题
${requestForm.value.basicSituation}

二、请示事项的必要性和可行性及其意义
${requestForm.value.necessity}

三、具体方案和请示事项，包括明确地提出需要上级提供的支持是什么及这些支持匹配到位时间
${requestForm.value.specificPlan}

以上内容已根据您提供的信息进行了优化和完善，确保请示文件的专业性和完整性。`

    ElMessage.success('请示文件内容已生成，请查看下方内容')
  } catch (error) {
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const submitRequest = () => {
  if (!requestForm.value.companyName || !requestForm.value.subject || 
      !requestForm.value.recipient || !requestForm.value.purpose || 
      !requestForm.value.basis || !requestForm.value.intent || 
      !requestForm.value.basicSituation || !requestForm.value.necessity || 
      !requestForm.value.specificPlan) {
    ElMessage.warning('请填写所有必填项')
    return
  }

  // 生成预览内容
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">请示文件</h1>
      </div>
      
      <div class="doc-content">
        <div class="request-preview">
          <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1>
          
          <div class="doc-info">
            <p class="doc-number">${requestForm.value.docNumber || 'xxxx (202x) ×号'}</p>
            <p class="signatory">签发人：${requestForm.value.signatory || '待填写'}</p>
          </div>
          
          <div class="red-divider"></div>
          
          <div class="main-title">
            <h2>${requestForm.value.companyName}关于${requestForm.value.subject}的请示</h2>
          </div>
          
          <div class="basic-info">
            <p><strong>主送单位：</strong>${requestForm.value.recipient}</p>
            <p>为了${requestForm.value.purpose}，根据${requestForm.value.basis}，我单位拟${requestForm.value.intent}。</p>
          </div>
          
          <div class="intent-header">
            <h3>意图主旨</h3>
          </div>
          
          <div class="report-intro">
            <p>现将有关情况和我们的意见报告如下：</p>
          </div>
          
          <div class="content-sections">
            <div class="content-section">
              <h3>基本情况：</h3>
              <div class="content-text">${requestForm.value.basicSituation.replace(/\n/g, '<br>')}</div>
            </div>
            
            <div class="content-section">
              <h3>必要性和可行性及其意义：</h3>
              <div class="content-text">${requestForm.value.necessity.replace(/\n/g, '<br>')}</div>
            </div>
            
            <div class="content-section">
              <h3>具体方案和请示事项：</h3>
              <div class="content-text">${requestForm.value.specificPlan.replace(/\n/g, '<br>')}</div>
            </div>
          </div>
          
          <div class="ai-generated-content">
            <h3>AI生成内容：</h3>
            <div class="content-text">${requestForm.value.aiGeneratedContent ? requestForm.value.aiGeneratedContent.replace(/\n/g, '<br>') : 'AI生成内容将显示在这里...'}</div>
          </div>
          
          <div class="approval-section">
            <p>妥否，请批示。</p>
            <p>附件：</p>
          </div>
          
          <div class="contact-info">
            <p><strong>联系人：</strong>${requestForm.value.contactName || '待填写'}</p>
            <p><strong>电话：</strong>${requestForm.value.contactPhone || '待填写'}</p>
            <p><strong>日期：</strong>${requestForm.value.requestDate || new Date().toLocaleDateString('zh-CN')}</p>
            <p><strong>抄送：</strong>${requestForm.value.ccRecipients || '待填写'}</p>
            <p><strong>单位：</strong>${requestForm.value.unitAbbreviation || '办公室'}</p>
            <p><strong>打印日期：</strong>${requestForm.value.printDate || new Date().toLocaleDateString('zh-CN')} 印</p>
          </div>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success('请示文件已生成，请查看右侧预览')
}
const meetingRes=ref<any>([])
// 生成AI梳理内容
const generateProcessedContent = async () => {
  if (!meetingMinutesForm.value.meetingContent.trim()) {
    ElMessage.warning('请先输入会议内容')
    return
  }

  isAiProcessing.value = true

  try {
    // 调用AI梳理接口
    const result = await processMeetingContent(meetingMinutesForm.value.meetingContent)
      // 将agendas数组转换为格式化的文本
      const formattedContent = result.agendas.map(agenda => {
        const title = agenda.agenda_title
        const context = agenda.agenda_context.join('\n')
        return `${title}\n${context}`
      }).join('\n\n')
      
      meetingMinutesForm.value.aiProcessedContent = formattedContent
      meetingRes.value=result.agendas
    ElMessage.success('AI梳理完成')
    
  } catch (error) {
    console.error('AI梳理接口调用失败:', error)
  } finally {
    isAiProcessing.value = false
  }
}

// 生成会议纪要
const generateMeetingMinutes = () => {
  // 检查必填字段
  const missingFields = []
  
  if (!meetingMinutesForm.value.office.trim()) {
    missingFields.push('办公室')
  }
  if (!meetingMinutesForm.value.date.trim()) {
    missingFields.push('日期')
  }
  if (!meetingMinutesForm.value.meetingTitle.trim()) {
    missingFields.push('会议主题')
  }
  if (!meetingMinutesForm.value.time.trim()) {
    missingFields.push('时间')
  }
  if (!meetingMinutesForm.value.location.trim()) {
    missingFields.push('地点')
  }
  if (!meetingMinutesForm.value.host.trim()) {
    missingFields.push('主持人')
  }
  if (!meetingMinutesForm.value.meetingContent.trim()) {
    missingFields.push('会议内容')
  }
  
  if (missingFields.length > 0) {
    ElMessage.warning(`请先填写完整以下信息：${missingFields.join('、')}`)
    return
  }
  
  if (!meetingMinutesForm.value.aiProcessedContent.trim()) {
    ElMessage.warning('请先进行AI梳理')
    return
  }

  // 基于AI梳理的内容生成会议纪要
  setTimeout(() => {
    const processedContent = meetingMinutesForm.value.aiProcessedContent
    
    meetingMinutesForm.value.aiGeneratedMinutes = `${meetingMinutesForm.value.date}，${meetingMinutesForm.value.host}主持召开${meetingMinutesForm.value.meetingTitle}。会议就相关议题进行了研究讨论，形成以下会议纪要：

${processedContent}`
    
    ElMessage.success('会议纪要生成完成')
  }, 2000)
}

// 提交会议纪要
const submitMeetingMinutes = async () => {
  if (!meetingMinutesForm.value.office.trim() || !meetingMinutesForm.value.date ||
      !meetingMinutesForm.value.meetingTitle.trim() || !meetingMinutesForm.value.time.trim() ||
      !meetingMinutesForm.value.location.trim() || !meetingMinutesForm.value.host.trim() ||
      !meetingMinutesForm.value.meetingContent.trim()) {
    ElMessage.warning('请填写完整的会议纪要信息')
    return
  }

  if (!meetingMinutesForm.value.aiGeneratedMinutes.trim()) {
    ElMessage.warning('请先点击"纪要生成"按钮生成会议纪要内容')
    return
  }

  // 解析日期获取年月日
  const dateStr = meetingMinutesForm.value.date
  let issueYear = 0, issueMonth = 0, issueDay = 0
  
  if (dateStr) {
    const dateMatch = dateStr.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/)
    if (dateMatch) {
      issueYear = parseInt(dateMatch[1])
      issueMonth = parseInt(dateMatch[2])
      issueDay = parseInt(dateMatch[3])
    }
  }

  // 准备提交数据
  const submitData = {
    doc_id: meetingMinutesForm.value.docNumber || '',
    issue_office: meetingMinutesForm.value.office,
    issue_year: issueYear,
    issue_month: issueMonth,
    issue_day: issueDay,
    meeting_name: meetingMinutesForm.value.meetingTitle,
    meeting_date: meetingMinutesForm.value.time,
    meeting_place: meetingMinutesForm.value.location,
    meeting_leader: meetingMinutesForm.value.host,
    meeting_overview: meetingMinutesForm.value.aiGeneratedMinutes,
    attendees_list: meetingMinutesForm.value.attendees || '',
    primary_recipients: '',
    cc_recipients: '',
    agendas: (meetingRes.value || []) as any[],
  }

    try {
    // 调用提交接口
    const result = await submitMeeting(submitData)
    
    ElMessage.success('会议纪要生成成功')
    
    // 处理返回的图片数组数据
    if (result && Array.isArray(result)) {
      // 创建多张图片的HTML，每张图片占满宽度
      const imageHtml = result.map((imageData, index) => {
        return `<img src="${imageData}" style="width: 100%; height: auto; display: block; margin-bottom: 20px;" alt="会议纪要预览 ${index + 1}" />`
      }).join('')
      
      previewContent.value = imageHtml
      console.log('会议纪要多张图片预览已设置，共', result.length, '张图片')
    } else {
      // 其他格式的响应
      previewContent.value = result || '会议纪要生成成功，但返回格式不正确'
    }

  console.log('会议纪要预览内容已设置:', previewContent.value)
  ElMessage.success('会议纪要已生成，请查看右侧预览')
  } catch (error) {
    console.error('提交会议纪要失败:', error)
    ElMessage.error('会议纪要提交失败，请重试')
  }
}

// 提交个人工作报告
const submitPersonalWorkReport = () => {
  if (!personalWorkReportForm.value.topic.trim() || !personalWorkReportForm.value.wordCount.trim() ||
      !personalWorkReportForm.value.structure.trim() || !personalWorkReportForm.value.content.trim()) {
    ElMessage.warning('请填写完整的工作报告信息')
    return
  }

  // 生成预览内容
  previewContent.value = `# 个人工作报告

## 主题
${personalWorkReportForm.value.topic}

## 字数要求
${personalWorkReportForm.value.wordCount}

## 报告结构
${personalWorkReportForm.value.structure}

## 报告内容
${personalWorkReportForm.value.content}

## 生成说明
这是一份基于您提供的信息生成的工作报告，包含了主题、字数要求、报告结构和主要内容。`

  ElMessage.success('个人工作报告已生成，请查看右侧预览')
}

// 提交演讲稿
const submitSpeech = () => {
  if (!speechForm.value.topic.trim() || !speechForm.value.audience.trim() ||
      !speechForm.value.coreViewpoint.trim() || !speechForm.value.casesData.trim()) {
    ElMessage.warning('请填写完整的演讲稿信息')
    return
  }

  // 生成预览内容
  previewContent.value = `# 演讲稿

## 主题
${speechForm.value.topic}

## 受众
${speechForm.value.audience}

## 核心观点
${speechForm.value.coreViewpoint}

## 案例/数据
${speechForm.value.casesData}

## 生成说明
这是一份基于您提供的信息生成的演讲稿，包含了主题、受众、核心观点和案例数据等关键要素。`

  ElMessage.success('演讲稿已生成，请查看右侧预览')
}

// 续写功能提交
const submitContinue = async () => {
  if (!continueForm.value.text || !continueForm.value.requirements) {
    ElMessage.warning('请填写续写文本和要求')
    return
  }

  isGenerating.value = true
  try {
    const response = await generateDocument({
      type: 'continue',
      subType: 'text',
      content: continueForm.value
    })

    if (response.success) {
      previewContent.value = response.data.content
      markdownContent.value = response.data.markdown || response.data.content
      ElMessage.success('续写内容生成成功')
    } else {
      ElMessage.error(response.message || '续写内容生成失败')
    }
  } catch (error) {
    console.error('生成续写内容失败:', error)
    ElMessage.error('生成续写内容失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

// 润色功能提交
const submitPolish = async () => {
  if (!polishForm.value.text || !polishForm.value.style) {
    ElMessage.warning('请填写润色文本和要求')
    return
  }

  isGenerating.value = true
  try {
    const response = await generateDocument({
      type: 'polish',
      subType: polishForm.value.style,
      content: polishForm.value
    })

    if (response.success) {
      previewContent.value = response.data.content
      markdownContent.value = response.data.markdown || response.data.content
      ElMessage.success('润色内容生成成功')
    } else {
      ElMessage.error(response.message || '润色内容生成失败')
    }
  } catch (error) {
    console.error('生成润色内容失败:', error)
    ElMessage.error('生成润色内容失败，请重试')
  } finally {
    isGenerating.value = false
  }
}

const submitWorkReport = () => {
  // 验证必填项
  if (!workReportForm.value.docNumber || !workReportForm.value.issuer || 
      !workReportForm.value.companyName || !workReportForm.value.recipient || 
      !workReportForm.value.basis || !workReportForm.value.requirements || 
      !workReportForm.value.section1 || !workReportForm.value.section2 || 
      !workReportForm.value.section3 || !workReportForm.value.section4) {
    ElMessage.warning('请填写所有必填项')
    return
  }

  // 生成预览内容
  previewContent.value = `
    <div class="document-preview">
      <div class="doc-header">
        <h1 class="doc-title">工作报告</h1>
      </div>
      
      <div class="doc-content">
        <div class="company-header">
          <h1 class="company-title">陕西建工第十一建设集团有限公司文件</h1>
          <div class="document-info">
            <div class="doc-number">
              <span>${workReportForm.value.docNumber || 'xxxx (202x) ×号'}</span>
            </div>
            <div class="issuer">
              <span>签发人：</span>
              <span>${workReportForm.value.issuer}</span>
            </div>
          </div>
        </div>

        <div class="report-title-section">
          <div class="title-row">
            <span>${workReportForm.value.companyName}</span>
            <span class="title-main">关于</span>
            <span class="title-main">工作情况的报告</span>
          </div>
        </div>

        <div class="context-section">
          <div class="context-row">
            <span>主送单位：</span>
            <span>${workReportForm.value.recipient}</span>
          </div>
          <div class="context-row">
            <span>根据</span>
            <span>${workReportForm.value.basis}</span>
            <span>要求</span>
            <span>${workReportForm.value.requirements}</span>
            <span>（或</span>
            <span>${workReportForm.value.alternative}</span>
            <span>以来），我们</span>
            <span>${workReportForm.value.background}</span>
            <span>对</span>
            <span>${workReportForm.value.target}</span>
          </div>
          <div class="context-summary">
            <span>工作进行了认真总结。现将有关情况报告如下：</span>
          </div>
        </div>

        <div class="report-sections">
          <div class="report-section">
            <h3>一、工作基本情况及工作预期目标：</h3>
            <div class="content-text">${workReportForm.value.section1.replace(/\n/g, '<br>')}</div>
          </div>

          <div class="report-section">
            <h3>二、对照预期目标达成的结果，主要做法和成绩，包括采取的办法、措施和产生的效果等：</h3>
            <div class="content-text">${workReportForm.value.section2.replace(/\n/g, '<br>')}</div>
          </div>

          <div class="report-section">
            <h3>三、存在的问题以及拟采取的对策措施：</h3>
            <div class="content-text">${workReportForm.value.section3.replace(/\n/g, '<br>')}</div>
          </div>

          <div class="report-section">
            <h3>四、下一步工作安排及优化思路：</h3>
            <div class="content-text">${workReportForm.value.section4.replace(/\n/g, '<br>')}</div>
          </div>
        </div>

        <div class="ai-generation-section">
          <div class="ai-section-header">
            <span class="ai-hint-large">（蓝色部分为AI根据紫色部分生成内容）</span>
          </div>
          <div class="ai-output-area">
            <h4 class="ai-output-title">[AI生成]</h4>
            <div class="content-text">${workReportForm.value.aiGeneratedContent ? workReportForm.value.aiGeneratedContent.replace(/\n/g, '<br>') : 'AI生成内容将显示在这里...'}</div>
          </div>
        </div>

        <div class="work-report-footer">
          <div class="footer-signature">
            <div class="company-signature">
              <span>陕西建工第十一建设集团有限公司</span>
              <span>${workReportForm.value.engineeringCompany || 'XXX'}</span>
              <span>工程公司</span>
            </div>
            <div class="signature-date">
              <span>${workReportForm.value.signatureDate || new Date().toLocaleDateString('zh-CN')}</span>
            </div>
          </div>
          
          <div class="footer-cc">
            <span>抄送：</span>
            <span>${workReportForm.value.ccRecipients || '姓名/单位、姓名/单位'}</span>
          </div>
          
          <div class="footer-unit-info">
            <div class="unit-table">
              <div class="unit-cell">
                <span>单位规范简称</span>
              </div>
              <div class="unit-cell">
                <span>办公室</span>
              </div>
            </div>
          </div>
          
          <div class="footer-print-info">
            <span class="print-date">
              <span>${workReportForm.value.printDate || new Date().toLocaleDateString('zh-CN')}</span>
            </span>
            <span class="print-seal">印</span>
          </div>
        </div>
      </div>
    </div>
  `
  
  ElMessage.success('工作报告已生成，请查看右侧预览')
}

// 重新生成内容
const regenerateContent = async () => {
  isRegenerating.value = true
  isPageLoading.value = true // 开始页面级加载
  
  try {
    // 根据当前选择的文档类型调用相应的生成方法
    if (selectedMainNav.value === 'office') {
      if (selectedSubNav.value === 'notice') {
        await generateNoticeContent()
        submitNotice()
      } else if (selectedSubNav.value === 'news') {
        await generateNewsArticle()
        submitNews()
      } else if (selectedSubNav.value === 'narrative') {
        await generateLetterContent()
        submitLetter()
      } else if (selectedSubNav.value === 'retelling') {
        await generateReplyContent()
        submitReplyLetter()
      } else if (selectedSubNav.value === 'directive') {
        await generateRequestContent()
        submitRequest()
      } else if (selectedSubNav.value === 'work-report') {
        await generateWorkReport()
        submitWorkReport()
      }
    } else if (selectedMainNav.value === 'meeting') {
        submitMeetingMinutes()
    } else if (selectedMainNav.value === 'personal') {
      if (selectedSubNav.value === 'report') {
        submitPersonalWorkReport()
      } else if (selectedSubNav.value === 'speech') {
        submitSpeech()
      }
    }
    
    ElMessage.success('内容已重新生成')
  } catch (error) {
    ElMessage.error('重新生成失败，请重试')
  } finally {
    isRegenerating.value = false
    isPageLoading.value = false // 结束页面级加载
  }
}

// 统一的生成处理方法
const handleGenerate = async () => {
  isGenerating.value = true
  isPageLoading.value = true // 开始页面级加载
  
  try {
  // 根据当前选择的文档类型调用相应的生成方法
  if (selectedMainNav.value === 'office') {
    if (selectedSubNav.value === 'notice') {
      await submitNotice()
    } else if (selectedSubNav.value === 'news') {
      await submitNews()
    } else if (selectedSubNav.value === 'narrative') {
      await submitLetter()
    } else if (selectedSubNav.value === 'retelling') {
      await submitReplyLetter()
    } else if (selectedSubNav.value === 'directive') {
      await submitRequest()
    } else if (selectedSubNav.value === 'work-report') {
      await submitWorkReport()
    }
  } else if (selectedMainNav.value === 'meeting') {
      console.log('调用submitMeetingMinutes函数')
      await submitMeetingMinutes()
      console.log('submitMeetingMinutes执行完成，previewContent:', previewContent.value)
  } else if (selectedMainNav.value === 'personal') {
    if (selectedSubNav.value === 'report') {
      await submitPersonalWorkReport()
    } else if (selectedSubNav.value === 'speech') {
      await submitSpeech()
    }
  } else if (selectedMainNav.value === 'continue') {
    await submitContinue()
  } else if (selectedMainNav.value === 'polish') {
    await submitPolish()
    }
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error('生成失败，请重试')
  } finally {
    isGenerating.value = false
    isPageLoading.value = false // 结束页面级加载
  }
}

// 导出内容
const exportContent = async () => {
  if (!previewContent.value) {
    ElMessage.warning('没有可导出的内容')
    return
  }
  
  try {
    // 特殊处理会议纪要导出
    if (selectedMainNav.value === 'meeting') {
      // 检查会议纪要表单是否完整
      if (!meetingMinutesForm.value.office.trim() || !meetingMinutesForm.value.date ||
          !meetingMinutesForm.value.meetingTitle.trim() || !meetingMinutesForm.value.time.trim() ||
          !meetingMinutesForm.value.location.trim() || !meetingMinutesForm.value.host.trim() ||
          !meetingMinutesForm.value.meetingContent.trim()) {
        ElMessage.warning('请填写完整的会议纪要信息')
        return
      }

      if (!meetingMinutesForm.value.aiGeneratedMinutes.trim()) {
        ElMessage.warning('请先点击"纪要生成"按钮生成会议纪要内容')
        return
      }

      // 解析日期获取年月日
      const dateStr = meetingMinutesForm.value.date
      let issueYear = 0, issueMonth = 0, issueDay = 0
      
      if (dateStr) {
        const dateMatch = dateStr.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/)
        if (dateMatch) {
          issueYear = parseInt(dateMatch[1])
          issueMonth = parseInt(dateMatch[2])
          issueDay = parseInt(dateMatch[3])
        }
      }

        // 准备导出数据
  const exportData = {
    doc_id: meetingMinutesForm.value.docNumber || '',
    issue_office: meetingMinutesForm.value.office,
    issue_year: issueYear,
    issue_month: issueMonth,
    issue_day: issueDay,
    meeting_name: meetingMinutesForm.value.meetingTitle,
    meeting_date: meetingMinutesForm.value.time,
    meeting_place: meetingMinutesForm.value.location,
    meeting_leader: meetingMinutesForm.value.host,
    meeting_overview: meetingMinutesForm.value.aiGeneratedMinutes,
    attendees_list: meetingMinutesForm.value.attendees || '',
    primary_recipients: '',
    cc_recipients: '',
    agendas: meetingRes.value || [],
  }

      // 调用会议纪要导出接口
      const blob = await downloadMeetingMinutes(exportData)
      
      // 创建下载链接
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      
      // 设置文件名
      const fileName = `${meetingMinutesForm.value.meetingTitle}_会议纪要.docx`
      link.download = fileName
      
      // 触发下载
      document.body.appendChild(link)
      link.click()
      
      // 清理
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      
      ElMessage.success('会议纪要导出成功')
      return
    }
    
    // 其他文档类型的导出逻辑
    let fileName = 'document'
    let format = 'html' as const
    
    if (selectedMainNav.value === 'office') {
      if (selectedSubNav.value === 'notice') fileName = '通知'
      else if (selectedSubNav.value === 'news') fileName = '新闻'
      else if (selectedSubNav.value === 'narrative') fileName = '函件'
      else if (selectedSubNav.value === 'retelling') fileName = '复函'
      else if (selectedSubNav.value === 'directive') fileName = '请示文件'
      else if (selectedSubNav.value === 'work-report') fileName = '工作报告'
    } else if (selectedMainNav.value === 'personal') {
      if (selectedSubNav.value === 'report') fileName = '个人工作报告'
      else if (selectedSubNav.value === 'speech') fileName = '演讲稿'
    }
    
    // 调用后端导出API
    const blob = await exportDocument({
      type: selectedMainNav.value,
      subType: selectedSubNav.value,
      content: previewContent.value,
      format
    })
    
    // 创建下载链接
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${fileName}_${new Date().toISOString().slice(0, 10)}.html`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
  } catch (error: any) {
    console.error('导出失败:', error)
  }
}

// 组件挂载后设置自动宽度
onMounted(() => {
  setupAutoWidth()
})
</script>

<style scoped>
.doc-assistant-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--minimal-glass-bg);
  font-family: var(--minimal-font-family);
}

/* 顶部导航 */
.top-navigation {
  background: var(--minimal-card-bg);
  border-bottom: 1px solid var(--minimal-border);
  box-shadow: var(--minimal-shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
}

.back-button {
  flex-shrink: 0;
}

.back-button .el-button {
  border-radius: 8px;
  font-weight: 500;
}

.nav-container {
  display: flex;
  flex: 1;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-tab {
  padding: 16px 24px;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  user-select: none;
}

.nav-tab:hover {
  color: var(--minimal-primary-gradient);
  background: rgba(91, 124, 255, 0.05);
}

.nav-tab.active {
  color: #5b7cff;
  border-bottom-color: #5b7cff;
  background: rgba(91, 124, 255, 0.1);
}

/* 子导航 */
.sub-navigation {
  background: var(--minimal-card-bg);
  border-bottom: 1px solid var(--minimal-border);
}

.sub-nav-container {
  display: flex;
  padding: 8px 24px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 8px;
}

.sub-nav-tab {
  padding: 8px 16px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  user-select: none;
}

.sub-nav-tab:hover {
  color: #f3f3f3; 
  box-shadow: 0 4px 16px rgba(91, 124, 255, 0.3);
  background: #5b7cff
}

.sub-nav-tab.active {
  color: #f3f3f3; 
  box-shadow: 0 4px 16px rgba(91, 124, 255, 0.3);
  background: #5b7cff
}

/* 主容器 */
.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 24px 10px;
  gap: 24px;
  margin: 0 auto;
  width: 95%;
}

/* 左侧输入区域 */
.input-section {
  flex: 1;
  max-width: 50%;
  background: var(--minimal-card-bg);
  border-radius: var(--minimal-radius);
  box-shadow: var(--minimal-shadow);
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.input-content {
  flex: 1;
  overflow-y: auto;
}

.form-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-title {
  padding: 24px 24px 16px;
  /* border-bottom: 1px solid var(--minimal-border); */
}

.form-title h2 {
  text-align: center;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--minimal-text);
}

.form-body {
  flex: 1;
  padding: 24px 24px 24px 24px;
}

/* 表单样式 */
.intro-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.intro-section span {
  color: #495057;
  font-weight: 500;
}

.date-picker-inline {
  width: 120px;
}

.inline-input {
  width: 150px;
}

.form-section {
  margin-bottom: 32px;
}

.form-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--minimal-text);
}

.hint-text {
  font-size: 12px;
  color: #8b5cf6;
  font-weight: 400;
}

.field-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.field-group label {
  min-width: 80px;
  font-weight: 600;
  color: #374151;
}

.field-input {
  flex: 1;
  min-width: 200px;
  width: auto;
  transition: width 0.3s ease;
}

/* 时间范围选择器样式 */
.time-range-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.start-time-picker,
.end-time-picker {
  flex: 1;
  min-width: 200px;
}

.time-separator {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
}

/* 手动输入区域 */
.manual-content-section {
  margin-bottom: 16px;
}

.manual-textarea :deep(.el-textarea__inner) {
  border: 2px solid #d1c4e9;
  border-radius: 8px;
}

/* AI内容区域 */
.ai-content-section {
  background: #f0f9ff;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
  margin-bottom: 20px;
}

.ai-hint {
  color: #0369a1;
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 500;
}

.ai-textarea :deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #0ea5e9;
  border-radius: 8px;
}

.ai-generate-btn {
  margin-top: 12px;
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

/* 公司信息区域 */
.company-info-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  gap: 16px;
  padding: 8px;
  border-radius: 8px;
}

.company-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-field label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.company-input {
  width: 200px;
}

.office-field {
  display: flex;
  align-items: center;
}

.date-field {
  display: flex;
  align-items: center;
}

.date-picker {
  width: 160px;
}

.textarea-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.textarea-input :deep(.el-textarea__inner):focus {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

.submit-section {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--minimal-border);
  margin-top: 32px;
}

.unified-submit-section {
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--minimal-border);
  background: var(--minimal-card-bg);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-radius: 0 0 var(--minimal-radius) var(--minimal-radius);
  box-shadow: var(--minimal-shadow);
  margin-top: auto;
}
.submit-btn {
  padding: 12px 48px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(91, 124, 255, 0.3);
}
/* 空状态 */
.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--minimal-card-bg);
  border-radius: var(--minimal-radius);
  box-shadow: var(--minimal-shadow);
}
.empty-content {
  text-align: center;
  color: #64748b;
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.empty-content h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #374151;
}

.empty-content p {
  margin: 0;
  color: #64748b;
}
/* 右侧预览区域 */
.preview-section {
  flex: 1;
  max-width: 50%;
  background: var(--minimal-card-bg);
  border-radius: var(--minimal-radius);
  box-shadow: var(--minimal-shadow);
  overflow: hidden;
}
.preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.preview-header {
  padding: 24px;
  border-bottom: 1px solid var(--minimal-border);
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-mode-switch {
  display: flex;
  align-items: center;
}

.preview-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--minimal-text);
}

.preview-body {
  flex: 1;
  overflow-y: auto;
  line-height: 1.8;
}

.preview-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--minimal-border);
  background: #f8f9fa;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.action-btn {
  padding: 8px 20px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.markdown-preview {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}

.markdown-preview pre {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

.preview-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-preview-content {
  text-align: center;
  color: #64748b;
}

.preview-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-preview-content h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #374151;
}

.empty-preview-content p {
  margin: 0;
  color: #64748b;
}

/* 文档预览样式 */
.document-preview {
  max-width: 100%;
}

.doc-header {
  text-align: center;
  margin-bottom: 32px;
}

.doc-title {
  font-size: 32px;
  font-weight: 700;
  color: #dc2626;
  margin: 0;
}

.doc-content h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 24px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.doc-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 20px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.doc-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 16px 0 8px 0;
}

.doc-content p {
  margin: 12px 0;
  color: #374151;
  text-indent: 2em;
}

.doc-content .intro {
  font-weight: 500;
  text-indent: 2em;
  margin-bottom: 24px;
}

.content-text {
  color: #374151;
  line-height: 1.8;
  white-space: pre-wrap;
  margin: 12px 0;
  text-indent: 2em;
}

.doc-footer {
  margin-top: 48px;
  text-align: right;
  padding-top: 24px;
  border-top: 2px solid #e5e7eb;
}

.signature {
  margin: 0;
  color: #374151;
  font-weight: 500;
  text-indent: 0 !important;
}

/* 工作报告预览样式 */
.doc-content .company-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.doc-content .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
}

.doc-content .document-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.doc-content .report-title-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.doc-content .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.doc-content .title-main {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.doc-content .context-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.doc-content .context-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.doc-content .context-summary {
  margin-top: 12px;
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.doc-content .report-sections {
  margin-top: 24px;
}

.doc-content .report-section {
  margin-bottom: 32px;
  padding: 16px;
  background:#f3e5f5;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.doc-content .ai-generation-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.doc-content .ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.doc-content .ai-hint-large {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.doc-content .ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.doc-content .ai-output-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.doc-content .work-report-footer {
  margin-top: 48px;
  text-align: right;
  padding-top: 24px;
  border-top: 2px solid #e5e7eb;
}

.doc-content .footer-signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.doc-content .company-signature {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-content .footer-cc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.doc-content .footer-unit-info {
  margin-bottom: 16px;
}

.doc-content .unit-table {
  display: flex;
  gap: 10px;
}

.doc-content .unit-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-content .footer-print-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.doc-content .print-seal {
  font-size: 20px;
  font-weight: 700;
  color: #dc2626;
}

.placeholder-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.placeholder-form p {
  color: #64748b;
  text-align: center;
  margin-bottom: 24px;
  font-style: italic;
}

.placeholder-form .textarea-input {
  flex: 1;
}

/* 工作报告表单样式 */
.company-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.company-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
}

.document-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.doc-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-number span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.doc-number-input {
  width: 180px;
}

.issuer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.issuer span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.issuer-input {
  width: 150px;
}

.report-title-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.title-row span {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.company-name-input {
  width: 250px;
}

.title-main {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.context-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.context-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.context-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.context-input {
  flex: 1;
  width: 250px;
}

.context-summary {
  margin-top: 12px;
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.context-summary span {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.report-sections {
  margin-top: 24px;
}

.report-section {
  margin-bottom: 32px;
  padding: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  border: 2px solid #d1c4e9;
}

.report-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.section-note {
  font-size: 12px;
  color: #8b5cf6;
  font-weight: 400;
  margin-bottom: 12px;
}

.manual-textarea-large :deep(.el-textarea__inner) {
  border: 2px solid #d1c4e9;
  border-radius: 8px;
}

.ai-generation-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ai-hint-large {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.ai-generate-btn-large {
  margin-top: 0;
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

.ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.ai-output-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.ai-textarea-large :deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #0ea5e9;
  border-radius: 8px;
}

.work-report-footer {
  margin-top: 48px;
  text-align: right;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.footer-signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.company-signature {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-signature span {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
}

.engineering-company-input {
  width: 180px;
}

.signature-date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signature-date span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.signature-date-picker {
  width: 160px;
}

.footer-cc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-cc span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.cc-input {
  width: 250px;
}

.footer-unit-info {
  margin-bottom: 16px;
}

.unit-table {
  display: flex;
  gap: 10px;
}

.unit-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-cell span {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.footer-print-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.print-date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.print-date span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.print-date-picker {
  width: 160px;
}

.print-seal {
  font-size: 20px;
  font-weight: 700;
  color: #dc2626;
}

/* 新闻编写表单样式 */
.news-instruction-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.news-instruction-bar span {
  color: #495057;
  font-weight: 500;
  font-size: 16px;
}

.topic-input {
  width: 200px;
}

.news-input-sections {
  margin-bottom: 24px;
}

.news-input-section {
  margin-bottom: 20px;
}

.news-input-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.news-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.news-textarea :deep(.el-textarea__inner):focus {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

.writing-style-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #8b5cf6;
}

.writing-style-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.style-options {
  display: flex;
  flex-direction: column;
}

.style-option {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.other-style-input {
  width: 150px;
  margin-left: 8px;
}

.style-hint {
  font-size: 12px;
  color: #6b7280;
  margin-left: 8px;
}

.news-ai-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.news-ai-section .ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.news-ai-section .ai-hint {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.news-ai-section .ai-generate-btn {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

.news-ai-section .ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.news-ai-section .ai-output-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

/* 新闻预览样式 */
.doc-content .news-preview {
  max-width: 100%;
}

.doc-content .news-preview h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 20px 0;
  text-align: center;
}

.doc-content .news-meta {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #5b7cff;
}

.doc-content .news-meta p {
  margin: 8px 0;
  color: #374151;
  font-weight: 500;
}

  .doc-content .news-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 20px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
  }

/* 函编写表单样式 */
.letter-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #dc2626;
}

.letter-header .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0;
}

.letter-title-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.letter-title-section .title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.letter-title-section .title-main {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.company-name-input {
  width: 150px;
}

.subject-input {
  width: 200px;
}

.doc-number-input {
  width: 180px;
}

.recipient-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.recipient-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recipient-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.recipient-input {
  flex: 1;
  max-width: 300px;
}

.letter-content-section {
  margin-bottom: 24px;
}

.introduction-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.intro-row {
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.intro-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.intro-input {
  width: 150px;
}

.intro-note {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.intro-note span {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.letter-sections {
  margin-top: 20px;
}

.letter-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  border: 2px solid #d1c4e9;
}

.letter-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.letter-textarea :deep(.el-textarea__inner) {
  border: 2px solid #d1c4e9;
  border-radius: 8px;
}

.letter-ai-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.letter-ai-section .ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.letter-ai-section .ai-hint {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.letter-ai-section .ai-generate-btn {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

.letter-ai-section .ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.letter-ai-section .ai-output-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.letter-footer {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.closing-section {
  text-align: left;
  margin-bottom: 20px;
}

.closing-section span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.contact-section {
  margin-bottom: 20px;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.contact-input {
  width: 150px;
}

.date-section {
  text-align: right;
  margin-bottom: 12px;
}

.letter-date-picker {
  width: 160px;
}

/* 函件预览样式 */
.doc-content .letter-preview {
  max-width: 100%;
}

.doc-content .letter-preview .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0 0 24px 0;
  text-align: center;
}

.doc-content .letter-title {
  text-align: center;
  margin-bottom: 24px;
}

.doc-content .letter-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.doc-content .doc-number {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.doc-content .recipient-info {
  margin-bottom: 20px;
}

.doc-content .recipient-info p {
  margin: 8px 0;
  color: #374151;
  font-weight: 500;
}

.doc-content .letter-intro {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #5b7cff;
}

.doc-content .letter-intro p {
  margin: 0;
  color: #374151;
  font-weight: 500;
  text-indent: 2em;
}

.doc-content .letter-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 20px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.doc-content .ai-generated-content {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 8px;
  border-left: 4px solid #0ea5e9;
}

.doc-content .ai-generated-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: #0369a1;
  margin: 0 0 12px 0;
}

.doc-content .letter-closing {
  text-align: center;
  margin: 24px 0;
}

.doc-content .letter-closing p {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
  margin: 0;
}

.doc-content .contact-info {
  text-align: right;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.doc-content .contact-info p {
  margin: 8px 0;
  color: #374151;
  font-weight: 500;
}

/* 复函编写表单样式 */
.reply-letter-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #dc2626;
}

.reply-letter-header .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0;
}

.reply-title-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.reply-title-section .title-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;
  flex-wrap: wrap;
}

.reply-title-section .title-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.letter-subject-input {
  width: 120px;
}

.doc-ref-input {
  width: 120px;
}

.manual-content-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  border: 2px solid #d1c4e9;
}

.reply-textarea :deep(.el-textarea__inner) {
  border: 2px solid #d1c4e9;
  border-radius: 8px;
}

.reply-ai-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.reply-ai-section .ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reply-ai-section .ai-hint {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.reply-ai-section .ai-generate-btn {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

.reply-ai-section .ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.reply-footer {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.reply-footer .closing-section {
  text-align: left;
  margin-bottom: 20px;
}

.reply-footer .closing-section span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.reply-footer .date-section {
  text-align: right;
}

.reply-date-picker {
  width: 160px;
}
.request-footer .date-section {
  text-align: right;
}
.request-footer .contact-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.request-footer .unit-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.request-footer .print-date {
  text-align: right;
}
.request-footer .cc-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

/* 输入框自动宽度 */
.el-input {
  transition: width 0.3s ease;
}

.el-input:focus-within {
  width: auto;
  min-width: 200px;
}

/* 让所有输入框都能根据内容自动调整宽度 */
.el-input__inner,
.el-textarea__inner {
  width: 100%;
  box-sizing: border-box;
}

/* 输入框聚焦时的样式 */
.el-input:focus-within .el-input__inner,
.el-textarea:focus-within .el-textarea__inner {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

/* 自动宽度调整的CSS实现 */
.auto-width-input {
  width: auto;
  min-width: 200px;
  max-width: 600px;
  transition: width 0.3s ease;
}

.auto-width-input:focus {
  width: auto;
}

/* 为输入框（input）添加自动宽度 */
.company-name-input,
.subject-input,
.recipient-input,
.intro-input,
.info-input,
.letter-subject-input,
.doc-ref-input,
.field-input,
.inline-input,
.contact-input,
.cc-input,
.unit-input,
.doc-number-input,
.signatory-input,
.issuer-input,
.context-input,
.topic-input,
.office-input,
.time-input,
.location-input,
.host-input,
.attendees-input,
.word-count-input,
.audience-input {
  width: auto;
  min-width: 200px;
  max-width: 600px;
  transition: width 0.3s ease;
}

/* 为文本域（textarea）添加固定宽度 */
.manual-textarea,
.ai-textarea,
.letter-textarea,
.reply-textarea,
.textarea-input,
.structure-textarea,
.content-textarea,
.core-viewpoint-textarea,
.cases-data-textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* 为所有输入框添加悬停提示样式 */
.el-input:hover,
.el-textarea:hover {
  cursor: help;
}

/* 复函预览样式 */
.doc-content .reply-letter-preview {
  max-width: 100%;
}

.doc-content .reply-letter-preview .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0 0 16px 0;
  text-align: center;
}

.doc-content .doc-number {
  text-align: right;
  margin-bottom: 20px;
}

.doc-content .doc-number p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.doc-content .reply-title {
  text-align: center;
  margin-bottom: 24px;
}

.doc-content .reply-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.doc-content .reply-body {
  margin-bottom: 24px;
}

.doc-content .reply-body .content-text {
  color: #374151;
  line-height: 1.8;
  white-space: pre-wrap;
  margin: 12px 0;
  text-indent: 2em;
}

/* 请示文件表单样式 */
.request-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #dc2626;
}

.request-header .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0;
}

.request-info-section {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.doc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.doc-number-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signatory-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signatory-field span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.doc-number-input {
  width: 180px;
}

.signatory-input {
  width: 150px;
}

.red-divider {
  height: 2px;
  background: #dc2626;
  margin: 20px 0;
  border-radius: 1px;
}

.main-title-section {
  margin-bottom: 20px;
  padding: 16px;
   background: #f8f9fa; 
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
}

.main-title-section .title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.main-title-section .title-text {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.company-name-input {
  width: 150px;
}

.subject-input {
  width: 200px;
}

.basic-info-section {
  margin-bottom: 20px;
  padding: 16px;
/*   background: #fef3c7; */
  border-radius: 12px;
  /* border-left: 4px solid #f59e0b; */
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.info-row span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.info-input {
  width: 150px;
}

.intent-header {
  background: #fef3c7;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
}

.intent-header span {
  font-size: 16px;
  color: #92400e;
  font-weight: 600;
}

.report-intro {
  text-align: center;
  margin-bottom: 24px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #5b7cff;
}

.report-intro span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.detailed-content-section {
  margin-bottom: 24px;
}

.content-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  border: 2px solid #d1c4e9;
}

.content-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.manual-hint {
  font-size: 12px;
  color: #8b5cf6;
  font-weight: 400;
}

.manual-textarea :deep(.el-textarea__inner) {
  border: 2px solid #d1c4e9;
  border-radius: 8px;
}

.request-ai-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 2px solid #0ea5e9;
}

.request-ai-section .ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.request-ai-section .ai-hint {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

.request-ai-section .ai-generate-btn {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
  border-radius: 8px;
}

.request-ai-section .ai-output-area {
  padding: 12px;
  background: #f3e5f5;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.request-ai-section .ai-output-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.ai-content-placeholder {
  margin-bottom: 16px;
  padding: 12px;
  background: #e0f2fe;
  border-radius: 8px;
  border: 1px solid #0ea5e9;
}

.ai-content-placeholder p {
  margin: 8px 0;
  color: #0369a1;
  font-size: 14px;
}

.approval-section {
  margin: 24px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
  text-align: center;
}

.approval-text {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.approval-text span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.attachment-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.attachment-section span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.upload-btn {
  background: #0ea5e9;
  border: none;
  border-radius: 6px;
}

.request-footer {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #5b7cff;
  gap: 20px;
}

.footer-left {
  flex: 1;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-info span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.contact-input {
  width: 120px;
}

.footer-right > div {
  margin-bottom: 12px;
}

.cc-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cc-section span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.cc-input {
  width: 150px;
}

.unit-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.unit-info span {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.unit-input {
  width: 100px;
}

.print-date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.print-date-picker {
  width: 160px;
}

.print-seal {
  font-size: 20px;
  font-weight: 700;
  color: #dc2626;
}

/* 请示文件预览样式 */
.doc-content .request-preview {
  max-width: 100%;
}

.doc-content .request-preview .company-title {
  font-size: 24px;
  font-weight: 700;
  color: #dc2626;
  margin: 0 0 20px 0;
  text-align: center;
}

.doc-content .doc-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.doc-content .doc-number {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.doc-content .signatory {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.doc-content .red-divider {
  height: 2px;
  background: #dc2626;
  margin: 20px 0;
  border-radius: 1px;
}

.doc-content .main-title {
  text-align: center;
  margin-bottom: 24px;
}

.doc-content .main-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.doc-content .basic-info {
  margin-bottom: 20px;
  padding: 16px;
  background: #fef3c7;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.doc-content .basic-info p {
  margin: 8px 0;
  color: #92400e;
  font-weight: 500;
}

.doc-content .intent-header {
  background: #fef3c7;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
}

.doc-content .intent-header h3 {
  font-size: 16px;
  color: #92400e;
  font-weight: 600;
  margin: 0;
}

.doc-content .report-intro {
  text-align: center;
  margin-bottom: 24px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #5b7cff;
}

.doc-content .report-intro p {
  margin: 0;
  color: #495057;
  font-weight: 500;
}

/* 会议纪要表单样式 */
.meeting-header {
  margin-bottom: 24px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title-field {
  text-align: center;
}

.meeting-title-input {
  width: 400px;
  text-align: center;
}

.meeting-info-section {
  margin-bottom: 24px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.info-row span {
  min-width: 60px;
  font-weight: 500;
}

.meeting-content-section {
  margin-bottom: 24px;
}

.content-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.upload-buttons {
  display: flex;
  gap: 12px;
}

.upload-note {
  color: #666;
  font-size: 14px;
  margin-left: auto;
}

.content-input-area {
  background: #f3e5f5;
  border: 2px solid #d1c4e9;
  padding: 16px;
  border-radius: 8px;
}
.content-input-area :deep(.el-textarea__inner){
 border: 2px solid #d1c4e9;
}

.meeting-content-textarea {
  width: 100%;
  background-color: #f3e5f5;
}

.ai-process-section {
  margin-bottom: 24px;
  background: #f0f9ff;
  border: 2px solid #0ea5e9;
  padding: 20px;
  border-radius: 8px;
}
.ai-process-section :deep(.el-textarea__inner){
 border: 2px solid #0ea5e9;
}

.ai-process-header h3 {
  margin: 0 0 16px 0;
  color: #409EFF;
}

.ai-process-output {
  margin-bottom: 16px;
}

.ai-process-output .ai-process-textarea {
  background-color: #f3e5f5;
  width: 100%;
}

.ai-process-button {
  text-align: right;
}

.meeting-minutes-section {
  margin-bottom: 24px;
  background: #f0f8ff;
  border: 2px solid #0ea5e9;
  padding: 20px;
  border-radius: 8px;
}
.meeting-minutes-section :deep(.el-textarea__inner){
 border: 2px solid #0ea5e9;
}

.minutes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.minutes-header h3 {
  margin: 0;
  /* color: #409EFF; */
}

.minutes-buttons {
  display: flex;
  gap: 12px;
}

.export-btn {
  background: #ff9500;
  border-color: #ff9500;
}

.minutes-output {
  margin-bottom: 16px;
}

.minutes-textarea {
  width: 100%;
}

.attendees-section {
  margin-bottom: 24px;
}

.attendees-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.attendees-row span {
  min-width: 40px;
  font-weight: 500;
}

.attendees-input {
  flex: 1;
  max-width: 400px;
}

/* 个人文档表单通用样式 */
.personal-form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

/* 个人工作报告表单样式 */
.work-report-instruction-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
}

.work-report-instruction-bar span {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}

.work-report-input-section {
  gap: 20px;
  padding: 16px 0px;
  background: #ffffff;
}

.work-report-input-section label {
  display: block;
  min-width: 100px;
  font-weight: 600;
  color: #374151;
  margin-top: 8px;
  margin-bottom: 8px;
}

.word-count-input {
  width: 100%;
}

.word-count-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.word-count-input :deep(.el-input__wrapper:hover) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.word-count-input :deep(.el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.structure-textarea,
.content-textarea {
  flex: 1;
  border-radius: 8px;
}

.structure-textarea :deep(.el-textarea__inner),
.content-textarea :deep(.el-textarea__inner) {
  background:#f8f9fa;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
}

/* 讲稿编写表单样式 */
.speech-instruction-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #8b5cf6;
}

.speech-instruction-bar span {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}


.speech-input-section {
  gap: 20px;
  padding: 16px;
}

.speech-input-section label {
  display: block;
  margin-bottom: 8px;
  min-width: 100px;
  font-weight: 600;
  color: #374151;
  margin-top: 8px;
}

.audience-input {
  width: 100%;
}

.audience-input :deep(.el-input__wrapper) {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.audience-input :deep(.el-input__wrapper:hover) {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.audience-input :deep(.el-input__wrapper.is-focus) {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.core-viewpoint-textarea :deep(.el-textarea__inner),
.cases-data-textarea :deep(.el-textarea__inner) {
  background: #f8f9fa;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
}

/* 个人文档按钮样式 */
.personal-submit-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.personal-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.personal-submit-btn:active {
  transform: translateY(0);
}

/* 续写功能样式 */
.continue-form {
  max-width: 800px;
  margin: 0 auto;
}

.continue-section {
  margin-bottom: 32px;
}

.continue-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--minimal-text);
}

.continue-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.continue-textarea :deep(.el-textarea__inner):focus {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

/* 润色功能样式 */
.polish-form {
  max-width: 800px;
  margin: 0 auto;
}

.polish-section {
  margin-bottom: 32px;
}

.polish-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--minimal-text);
}

.polish-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.polish-textarea :deep(.el-textarea__inner):focus {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

.polish-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.polish-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.polish-option:hover {
  background: #f0f9ff;
  border-color: #5b7cff;
}

.polish-option .el-radio {
  margin-right: 8px;
}

.style-description {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
}

.other-style-input {
  width: 150px;
  margin-left: 8px;
}

.style-hint {
  font-size: 12px;
  color: #6b7280;
  margin-left: 8px;
}

.doc-content .content-sections h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 20px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.doc-content .approval-section {
  margin: 24px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #5b7cff;
  text-align: center;
}

.doc-content .approval-section p {
  margin: 8px 0;
  color: #495057;
  font-weight: 500;
}

.doc-content .contact-info {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.doc-content .contact-info p {
  margin: 8px 0;
  color: #374151;
  font-weight: 500;
}
.doc-number-section{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.content-input-area-note{
  margin-bottom: 10px;

}

/* 响应式设计 */
@media (max-width: 1200px) {
 /*  .main-container {
    padding: 16px;
    gap: 16px;
  }
   */
  .input-section,
  .preview-section {
    max-width: none;
  }
}

@media (max-width: 768px) {
/*   .main-container {
    flex-direction: column;
    padding: 12px;
  }
   */
  .input-section {
    max-width: 100%;
    height: 60vh;
  }
  
  .preview-section {
    max-width: 100%;
    height: 40vh;
  }
  
  .nav-container,
  .sub-nav-container {
    padding: 0 12px;
    overflow-x: auto;
  }
  
  .intro-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .field-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .field-group label {
    min-width: auto;
    margin-bottom: 8px;
  }
  
  .company-info-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .company-header {
    text-align: left;
    padding: 16px;
  }

  .company-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .document-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .doc-number, .issuer {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .doc-number-input, .issuer-input {
    width: 100%;
  }

  .report-title-section {
    padding: 12px;
  }

  .title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .company-name-input {
    width: 100%;
  }

  .context-section {
    padding: 12px;
  }

  .context-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .context-input {
    width: 100%;
  }

  .report-sections {
    margin-top: 16px;
  }

  .report-section {
    padding: 12px;
  }

  .report-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .section-note {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .manual-textarea-large :deep(.el-textarea__inner) {
    font-size: 14px;
  }

  .ai-generation-section {
    padding: 12px;
  }

  .ai-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ai-hint-large {
    font-size: 11px;
  }

  .ai-generate-btn-large {
    width: 100%;
  }

  .ai-output-area {
    padding: 8px;
  }

  .ai-output-title {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .ai-textarea-large :deep(.el-textarea__inner) {
    font-size: 14px;
  }

  .work-report-footer {
    margin-top: 32px;
    padding-top: 16px;
  }

  .footer-signature {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .company-signature {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .engineering-company-input {
    width: 100%;
  }

  .signature-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .signature-date-picker {
    width: 100%;
  }

  .footer-cc {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  .cc-input {
    width: 100%;
  }

  .footer-unit-info {
    margin-bottom: 12px;
  }

  .unit-table {
    flex-direction: column;
    gap: 8px;
  }

  .footer-print-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .print-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .print-date-picker {
    width: 100%;
  }

  .print-seal {
    font-size: 18px;
  }

  /* 新闻表单响应式样式 */
  .news-instruction-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .topic-input {
    width: 100%;
  }

  .news-input-section {
    margin-bottom: 16px;
  }

  .news-input-section label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .writing-style-section {
    padding: 12px;
  }

  .writing-style-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .style-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .other-style-input {
    width: 100%;
    margin-left: 0;
  }

  .style-hint {
    margin-left: 0;
    font-size: 11px;
  }

  .news-ai-section {
    padding: 12px;
  }

  .news-ai-section .ai-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-ai-section .ai-hint {
    font-size: 11px;
  }

  .news-ai-section .ai-generate-btn {
    width: 100%;
  }

  .news-ai-section .ai-output-area {
    padding: 8px;
  }

  .news-ai-section .ai-output-title {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .doc-content .news-preview h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .doc-content .news-meta {
    padding: 12px;
    margin-bottom: 20px;
  }

  .doc-content .news-content h3 {
    font-size: 16px;
    margin: 16px 0 10px 0;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper):hover {
  border-color: #5b7cff;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.1);
}

:deep(.el-button--primary) {
  background: linear-gradient(90deg, #5b7cff 0%, #a685ff 100%);
  border: none;
}

:deep(.el-button--primary):hover {
  background: linear-gradient(90deg, #4c6fff 0%, #9575ff 100%);
}

:deep(.el-date-editor) {
  border-radius: 8px;
}

:deep(.el-date-editor .el-input__wrapper) {
  border-radius: 8px;
}
/* 会议纪要文档样式 - 使用:deep()确保动态HTML内容能正确应用样式 */
.preview-body :deep(.meeting-minutes-document) {
  padding: 40px !important;
  margin: 20px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
  line-height: 1.8 !important;
}

.preview-body :deep(.document-header) {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.preview-body :deep(.main-title) {
  font-size: 36px !important;
  font-weight: bold !important;
  color: #d32f2f !important;
  letter-spacing: 8px !important;
  margin: 20px 0 !important;
  text-align: center !important;
}

.preview-body :deep(.document-info) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
  gap: 15px !important;
}

.preview-body :deep(.doc-number) {
  font-weight: bold !important;
  font-size: 16px !important;
  color: #333 !important;
  text-align: center !important;
  margin-bottom: 5px !important;
}

.preview-body :deep(.doc-office) {
  font-weight: bold !important;
  text-align: left !important;
}

.preview-body :deep(.doc-date) {
  font-weight: bold !important;
  text-align: right !important;
}

.preview-body :deep(.office-date-row) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.preview-body :deep(.red-line) {
  height: 3px !important;
  background: #d32f2f !important;
  margin: 20px 0 !important;
}

.preview-body :deep(.document-body) {
  text-align: left !important;
  font-size: 16px !important;
}

.preview-body :deep(.meeting-title) {
  font-size: 22px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin: 30px 0 !important;
  color: #333 !important;
}

.preview-body :deep(.meeting-details) {
  margin-bottom: 30px !important;
}

.preview-body :deep(.meeting-details p) {
  margin: 15px 0 !important;
  font-size: 16px !important;
}

.preview-body :deep(.meeting-details strong) {
  font-weight: bold !important;
  color: #333 !important;
}

.preview-body :deep(.meeting-agenda) {
  margin: 20px 0 !important;
  padding: 20px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.preview-body :deep(.meeting-agenda ol) {
  margin: 10px 0 !important;
  padding-left: 20px !important;
}

.preview-body :deep(.meeting-agenda li) {
  margin: 8px 0 !important;
}

.preview-body :deep(.agenda-list) {
  margin: 15px 0 !important;
  padding-left: 30px !important;
  list-style: decimal !important;
}

.preview-body :deep(.agenda-list li) {
  margin: 12px 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

.preview-body :deep(.agenda-list li::marker) {
  font-weight: bold !important;
}

.preview-body :deep(.meeting-content) {
  margin-top: 30px !important;
  line-height: 1.8 !important;
}

.preview-body :deep(.meeting-content h3) {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #333 !important;
  margin: 25px 0 15px 0 !important;
  padding-left: 0 !important;
}

.preview-body :deep(.meeting-content p) {
  margin: 15px 0 !important;
  text-indent: 2em !important;
  line-height: 1.8 !important;
}

.preview-body :deep(.meeting-content ul) {
  margin: 15px 0 !important;
  padding-left: 40px !important;
  list-style: disc !important;
}

.preview-body :deep(.meeting-content ul li) {
  margin: 8px 0 !important;
  line-height: 1.6 !important;
}

.preview-body :deep(.meeting-content ul li::marker) {
  color: #666 !important;
}

.preview-body :deep(.meeting-content ol) {
  margin: 15px 0 !important;
  padding-left: 40px !important;
  list-style: decimal !important;
}

.preview-body :deep(.meeting-content ol li) {
  margin: 8px 0 !important;
  line-height: 1.6 !important;
}

.preview-body :deep(.meeting-content ol li::marker) {
  font-weight: bold !important;
}

.preview-body :deep(.attendees-section) {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
}

.preview-body :deep(.attendees-section p) {
  margin: 10px 0 !important;
  font-size: 16px !important;
}

/* 必填字段样式 */
.required-field {
  color: #f56c6c !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}

.office-field,
.date-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.title-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
}

.office-field .required-field,
.date-field .required-field,
.title-field .required-field {
  position: static !important;
  flex-shrink: 0 !important;
}

.required-fields-note {
  font-size: 12px !important;
  color: #666 !important;
  margin-top: 5px !important;
  text-align: center !important;
}

/* 弹窗样式 */
.text-modal :deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.text-modal :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.text-modal :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

.text-modal :deep(.el-dialog__body) {
  padding: 24px;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-tips {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-radius: 8px;
  border-left: 4px solid #667eea;
  font-size: 14px;
  color: #555;
}

.modal-tips .el-icon {
  color: #667eea;
  font-size: 16px;
}

.modal-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e1e5e9;
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.modal-textarea :deep(.el-textarea__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-footer .el-button {
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 500;
}

/* 只读输入框样式 */
.readonly-textarea {
  cursor: pointer;
  transition: all 0.3s ease;
}

.readonly-textarea:hover {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
}

.readonly-textarea :deep(.el-textarea__inner) {
  cursor: pointer;
  background-color: #fafbfc;
}

.readonly-textarea :deep(.el-textarea__inner):hover {
  background-color: #f0f2f5;
}
</style>